HTML使用Blob传输视频规避移动浏览器置顶视频背景/浏览器UA合集
最近在写一个视频背景的网页,视频背景在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背景方法
}