最近在写一个视频背景的网页,视频背景在PC端显示正常,但是很多国产移动浏览器会强制把video标签置顶,即使z-index属性为负数,并且强制使用浏览器自带的播放器组件播放,这样会破坏掉网页本身的视频背景,下面的方法可以适当规避大部分国产浏览器这样的做法,结尾有浏览器测试结果。

HTML中video标签改为以下写法并修改封面地址

<video id="bg-video" class="bg-video" muted loop autoplay playsinline preload="auto" poster="封面直链" data-setup="{}">
<source src="" type="video/mp4">
</video>

HTML尾部引入以下JS并修改视频地址

var video = document.getElementById("bg-video");
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
var play_url = '视频直链';
xhr.open("GET", play_url, true);
xhr.responseType = "blob";
xhr.onload = function() {
    if (this.status == 200) {
        var blob = this.response;
        console.log(blob);
        video.onload = function(e) {
            window.URL.revokeObjectURL(video.src);
        };
        video.src = window.URL.createObjectURL(blob);
    }
}
xhr.send();

移动端浏览器测试结果

浏览器测试结果UA标识
小米浏览器成功MiuiBrowser
百度失败,仍然强制置顶且无法播放baiduboxapp
百度极速版成功lite baiduboxapp
夸克失败,不置顶但无法播放Quark
UC浏览器失败,不置顶但无法播放UCBrowser
QQ浏览器成功MQQBrowser
搜狗极速浏览器失败,仍然强制置顶且无法播放SogouMSE
360浏览器成功无特殊UA
360极速浏览器成功无特殊UA
遨游浏览器成功Maxthon
花瓣浏览器成功HuaweiBrowser
黑鲨浏览器成功无特殊UA
华为浏览器成功HuaweiBrowser
2345浏览器成功Mb2345Browser
星愿浏览器成功无特殊UA
欧朋浏览器成功OPR
VIVO浏览器成功VivoBrowser
UC浏览器极速版成功UCBrowser
Safari成功Safari
Edge成功EdgA
Google Chrome成功Chrome
Firefox成功Firefox

几个无法适配的移动端浏览器可以尝试使用JS判断用户UA标识,为这几个浏览器就使用GIF背景代替视频背景

var explorer = window.navigator.userAgent;
if (explorer.indexOf("Quark") >= 0 ||
    explorer.indexOf("NABar") >= 0 ||
    explorer.indexOf("UCBrowser") >= 0 ||
    explorer.indexOf("SogouMSE") >= 0) {
//这里放替换GIF背景方法
}