HTML使用Blob传输视频规避移动浏览器置顶视频背景-浏览器UA合集

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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背景代替视频背景

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