Raw Source Toggle Dropdown

• Minified Source

velade48gmail.com / 网页视频背景

// ==UserScript==
// @name         网页视频背景
// @namespace    https://www.velhlkj.com/
// @version      0.3
// @description  将视频设定为网页的背景，可自行设定静音，循环点等。安装后请自行设定视频路径。过大的视频首次加载将占用较多的网络流量，首次加载后会保留在缓存中之后的加载会变得很快且不消耗网络流量，如果循环的起始点与结束点距离较远则可能出现卡顿，这是浏览器自身机制的问题。播放视频会占用一定的资源，因此配置低的电脑要酌情启用。
// @author       龙翔翎
// @match        <all_urls>
// @include      *
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @license      GPL-3.0-or-later
// ==/UserScript==

(function() {
    'use strict';
    /* 用户配置 */
    const videourl = "https://"; //视频链接，带https://或http://等。
    const opacity = "1"; //视频不透明度 取值 0-1 小数，1为不透明。或0%-100%，100%为不透明。
    const loopstart = 0.0; //循环开始点，秒数，可以是小数。
    const loopend = 0.0; //循环结束点，秒数，可以是小数。 结束点不能大于或等于视频本身长度，且必须大于loopstart，设为0表示整体循环。
    const muted = true; //是否静音，取值true/false，true为静音。

    const videoEle1 = document.createElement("video");
    videoEle1.id = "vel_background_video1";
    videoEle1.src = videourl;
    videoEle1.loop = true;
    videoEle1.muted = muted;
    videoEle1.autoplay = true;
    videoEle1.style.display = "block";
    videoEle1.style.position = "fixed";
    videoEle1.style.top = 0;
    videoEle1.style.left = 0;
    videoEle1.style.objectFit = "cover";
    videoEle1.style.width = "100%";
    videoEle1.style.height = "100%";
    videoEle1.style.zIndex = "-1";
    videoEle1.style.opacity = opacity;
    document.body.appendChild(videoEle1);

    const videoEle2 = document.createElement("video");
    videoEle2.id = "vel_background_video2";
    videoEle2.src = videourl;
    videoEle2.loop = true;
    videoEle2.muted = muted;
    videoEle2.style.display = "none";
    videoEle2.style.position = "fixed";
    videoEle2.style.top = 0;
    videoEle2.style.left = 0;
    videoEle2.style.objectFit = "cover";
    videoEle2.style.width = "100%";
    videoEle2.style.height = "100%";
    videoEle2.style.zIndex = "-1";
    videoEle2.style.opacity = opacity;
    videoEle2.currentTime = loopstart;
    document.body.appendChild(videoEle2);

    const style = document.createElement("style");
    style.textContent = `[data-velbgtrans] {background:transparent !important;}`;
    document.body.appendChild(style);
    let doms = document.querySelectorAll("*");
    doms.forEach(ele=>{
        if(ele.offsetWidth / window.innerWidth >= 0.3 || ele.offsetHeight / window.innerHeight >= 0.3){
            ele.setAttribute("data-velbgtrans","");
        }
    })

    var vid1 = document.getElementById("vel_background_video1");
    var vid2 = document.getElementById("vel_background_video2");
    vid1.addEventListener("timeupdate", function () {
        if(loopend > 0 && this.currentTime >= loopend - 2) {
            vid2.style.opacity = "0.01";
            vid2.style.display = "block";
            vid2.play();
            if(vid2.currentTime - loopstart >= 1){
                vid2.currentTime = loopstart;
            }
        }

        if(loopend > 0 && this.currentTime >= loopend) {
            let offsetTime = this.currentTime - loopend;
            vid2.currentTime = loopstart + offsetTime;
            vid2.style.opacity = opacity;
            this.style.display = "none";
            this.currentTime = loopstart;
            this.pause();
        }
    });

    vid2.addEventListener("timeupdate", function () {
        if(loopend > 0 && this.currentTime >= loopend - 2) {
            vid1.style.opacity = "0.01";
            vid1.style.display = "block";
            vid1.play();
            if(vid1.currentTime - loopstart >= 1){
                vid1.currentTime = loopstart;
            }
        }

        if(loopend > 0 && this.currentTime >= loopend) {
            let offsetTime = this.currentTime - loopend;
            vid1.currentTime = loopstart + offsetTime;
            vid1.style.opacity = opacity;
            this.style.display = "none";
            this.currentTime = loopstart;
            this.pause();
        }
    });

})();