关于javascript:我在C站看起了B站我将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 = true
    iframe.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.pageX
        startY = 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 站视频评论屏蔽插件
鼠标点击烟花成果，妹子看后直说酷