将B站视频设置为浏览器背景,你确定不试试?
动图效果
说在前面
心血来潮做了个插件,通过该插件我们使用B站视频来做自己浏览器网页的背景视频,这样浏览起来是不是会更加的赏心悦目。
使用步骤
插件下载
Gitee地址:https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/Chrome-backGroundVideo
CSDN插件:https://download.csdn.net/download/Twinkle_sone/22003790
添加扩展程序
打开链接 chrome://extensions/ 进入扩展程序管理页面,将下载解压的文件夹拉入这里即可,如下图,第一个插件即为我们新加的插件。
使用
添加完成之后,页面上会有扩展程序的小图标,点击这个小图标,会弹出一个窗口
在这个窗口输入视频链接后,我们就可以使用该视频作为网页背景了,那么问题来了,这个视频链接要去哪里获取呢?
获取链接
我们先随便在B站上打开一个视频,视频下方会有一个分享按钮。
点击按钮后会出现两个链接,我们只需要复制我们需要的链接即可,如下图:
将这个链接放进输入框后点击确认,我们会发现视频出来了,如下图:
但是视频播放不了,这是因为浏览器限制了视频自动播放,所以我们还需要稍微的手动一下,我们看到了页面左边有个粉粉的按钮,点击它会有什么效果呢?
点击了之后我们可以看到视频的层级就跑到了最上层来了,我们就可以点击到播放按钮了,所以我们只需要切换层级点击播放之后再切换层级回去就可以实现开头动图的效果了(不会有人嫌麻烦吧,(╥╯^╰╥)流泪)。
代码分析
获取视频链接
chrome.runtime.onConnect.addListener((res) => {// console.log('contentjs中的 chrome.runtime.onConnect:',res)if (res.name === 'myConnect') {res.onMessage.addListener(mess => {console.log('popup中 res.onMessage.addListener:', mess)mess = iframeSrcSplit(mess);createIframe(mess)})}
})
解析视频链接
function iframeSrcSplit(iframeSrc){let temp = iframeSrc.split('src="')[1];iframeSrc = temp.split('" ')[0];//弹幕iframeSrc += '&danmaku=0' //+ (this.danmaku ? 1 : 0)//画质iframeSrc += '&high_quality=1'//自动播放// iframeSrc += '&autoplay=true'//循环iframeSrc += '&loop=true'return iframeSrc;
}
创建iframe并插入
function createIframe(iframeSrc){let body = document.getElementsByTagName('body')[0];body.style.opacity = 0.8;let iframe = document.createElement('iframe');iframe.muted = trueiframe.src = iframeSrc;localStorage.setItem('iframeSrc',iframeSrc);iframe.id = 'BiliVideo';iframe.name = 'BiliVideo';iframe.style.width = '100%'iframe.style.height = '100%'iframe.style.position = 'fixed'body.before(iframe)iframe.style.zIndex = '100'
}
生成按钮
function btnGenerator(){let ghtml = document.getElementsByTagName('html')[0],gdiv = document.createElement('div');gdiv.id = 'changdiv'gdiv.style.position = 'fixed';gdiv.style.width = '100%';gdiv.style.height = '100%';gdiv.style.top = '0px';gdiv.style.left = '0px';gdiv.style.opacity = '0.7';gdiv.style.zIndex= '-1';ghtml.appendChild(gdiv);//页面上的切换按钮let gBtn = document.createElement('div');gBtn.id = 'gBtn';gBtn.innerText = "切换层级";gBtn.style.opacity = "0.6";gBtn.style.position = "fixed";gBtn.style.right = "40px";gBtn.style.top = "50%";gBtn.style.border = "solid black 1px"gBtn.style.width = "80px";gBtn.style.height = "80px";gBtn.style.borderRadius = "50% 50%";gBtn.style.lineHeight = "80px";gBtn.style.textAlign = "center";gBtn.style.backgroundImage = "linear-gradient(#e66465, #9198e5)";gBtn.style.fontSize = "initial";gBtn.style.cursor = "pointer";gBtn.style.zIndex = "999";ghtml.appendChild(gBtn);$("#gBtn").hover(function(){let w = parseInt($("#gBtn").css("left"));if(w == windowWidth-20){$("#gBtn").css({"left":windowWidth-80});}},function(){let w = parseInt($("#gBtn").css("left"));if(w >= windowWidth-80){$("#gBtn").css({"left":windowWidth-20});}});//按钮拖拽功能$("#gBtn").mousedown(function(e){gmove=true;startX = e.pageXstartY = e.pageY// console.log("move",gmove);_gx=e.pageX-parseInt($("#gBtn").css("left"));_gy=e.pageY-parseInt($("#gBtn").css("top"));});$(document).mousemove(function(e){if(gmove){var x=e.pageX-_gx;//控件左上角到屏幕左上角的相对位置var y=e.pageY-_gy;$("#gBtn").css({"top":y,"left":x});}}).mouseup(function(e){endX = e.pageX;endY = e.pageY;let d = Math.sqrt((startX - endX) * (startX - endX) + (startY - endY) * (startY - endY));if (d === 0 || d < 7) {// console.log("执行了点击事件");let iframe = document.getElementById('BiliVideo');if(iframe.style.zIndex == '-1'){iframe.style.zIndex = '100'}else{iframe.style.zIndex = '-1'}} else {// console.log("执行了拖拽事件");if(windowWidth - endX < 60){$("#gBtn").css({"left":windowWidth-20});}}gmove=false;});
}
代码地址
Gitee:https://gitee.com/zheng_yongtao/chrome-plug-in/tree/master/Chrome-backGroundVideo
(喜欢的可以点个星,呜呜呜)
更多插件
浏览器网页背景换肤插件
浏览器桌面挂件动画插件
B站视频评论屏蔽插件
鼠标点击烟花效果,妹子看后直说酷
将B站视频设置为浏览器背景,你确定不试试?相关推荐
- 如何将视频设置为网页背景
有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同. 第一步:准备工作 工欲善其事必先利其器,我们首先需要准备一个视频 第二步:html中引入视频 这里我们需要用到了 ...
- 如何设置的单位为m_如何将视频设置为网页背景
来源 | https://www.cnblogs.com/front-girl/archive/2018/03/23/8628571.html 有时候为一个网页添加一个动画效果的背景,会让网页增加一定 ...
- html怎么把视频设置为背景,如何将视频设置为网页背景
第一步:准备工作 工欲善其事必先利其器,我们首先需要准备一个视频 第二步:html中引入视频 这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放, ...
- 设置火狐浏览器背景图图片素材
- 用于stylus插件设置Chrome浏览器背景的几张图片
先保存张图片,后续会继续补充.
- 用火狐浏览器看b站视频默认没有声音
目录 问题场景: 问题描述: 原因分析: 解决方案: 1.按键盘上的 "Ctrl + i" 打开页面信息控制面板 2.点击 "权限" 3.找到最下面的 &quo ...
- html如何设置网页的背景图片,使放大或缩小浏览器时,页面排版和背景可以随浏览器放大缩小而排版不会改变,
用DIV+CSS写网页背景代码时,应该先写一个DIV,在这个DIV的CSS里面添加背景图片,并设置其margin为auto,宽度为100%或者auto:然后在这个DIV里面在写一个DIV,在第二个DI ...
- CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录 前言 一.多个背景图片 二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度 写在最后 前言 在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...
- 给360安全浏览器设置一个图片背景/主题
此方法适用于360安全浏览器,其他浏览器请移步: 给浏览器设置一个图片背景/主题 看看效果 1.点击 管理–>添加–>搜索stylebot–>安装 2.安装好了会有小图标 S 或者小 ...
最新文章
- php 动态网格,php-动态更改引导网格方向(从ltr到rtl或reverese)
- [功能发布]Excel催化剂2周年巨献-网页数据采集功能发布,满足90%合理场景使用...
- iOS 9之WatchKit for WatchOS 2
- python把矩阵堆叠成大矩阵_python numpy 矩阵堆叠实例
- 学教育成空中楼阁 巨额学费背后却是失业风险
- php htm specialchars_decode,PHP htmlspecialchars和htmlspecialchars_decode(函数)
- skhynix nvme toolbox怎么选择磁盘_为啥我的NVMe固态硬盘跑分比别人少一半!?莫慌,2张图完美解决...
- 软件开发工作过程中的一些总结
- python中sticky_Python stickymeta包_程序模块 - PyPI - Python中文网
- The conda.compat module is deprecated and will be removed in a future releas错误记录
- 12306抢票软件的一些学习
- 软件公司团队管理方法思考
- 利用Python爬取拉勾网招聘信息
- 1000年出现了哪些闰年C语言,C语言判断“1000年―2000年”之间的闰年
- EasyAR4.0使用说明(Unity3D)三----平面图像跟踪扩展:视频播放,涂涂乐
- LayaBox ARPG游戏副本之《帮派联赛》水晶占领核心玩法详解
- 宝可梦世界无限极服务器怎么进去,宝可梦世界无极限
- 科技云报道:5G商用倒计时,你关心的都在这儿
- SIFT特征点提取及描述论文算法详解
- 计算机科学文献中英文对照,计算机科学和技术英文文献.doc