html 实现动态视频背景

前言

最近迷上了动态视频背景, wallpap engine都能逛上一天( )。
看着桌面都能使用动态壁纸,于是我也想在html上实现
video标签是浏览器的默认视频标签,我也考虑过可能不同的浏览器会对视频标签进行修改,导致浏览器兼容问题。但我是真的没有找到其他的替代方式,想过canvas也可以实现动画,但是canvas也是使用video标签为图像源,所以就没有使用canvas,所以遇到如小米浏览器那样的浏览器就会出现一系列问题。我提出的解决方法是要么限制浏览器要么限制屏幕分辨率,我选择后者限制屏幕分辨率。这样也可以减少移动端浏览器负担，减少性能开销。
代码如下:

CSS

#DynamicWallpaper {
    left: 50% !important;
    top: 0 !important;
    margin: 0 !important;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -520;
    position: fixed;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media screen and (max-width: 768px) {

    /*屏幕小于768px隐藏*/
    #DynamicWallpaper {
        display: none;
    }
}

javascript

if (document.body.clientWidth >= 768) { //屏幕分辨率大于768px启用,避免屏幕小于768px通过css隐藏还会加载视频资源
    var DynamicWallpaper = document.createElement("video"); //创建video元素
    DynamicWallpaper.id = "DynamicWallpaper";//定义id
    DynamicWallpaper.src = "http://jacksen168.top/video/wallpaper.mp4";//视频链接
    DynamicWallpaper.autoplay = true;//视频自动播放
    DynamicWallpaper.muted = true;//视频静音(不想也可以设置为false或注释掉这一行)
    DynamicWallpaper.loop = true;//隐藏video视频控件
    DynamicWallpaper.playbackRate = 1;//视频播放倍数
    document.body.appendChild(DynamicWallpaper);//将元素添加到body里面
}