解决video标签在部分安卓默认浏览器上的播放样式问题
这个问题其实一度困扰我很久了,类似小米浏览器、魅族浏览器等等手机的默认浏览器上,video标签的样式修改会无效,且一旦播放就会全屏,层级提升到最前,并且有不可修改的控制条,对前端做美化极其的不友好。在解决这个问题的路上,尝试过很多方案,比如转换成mpeg,用canvas渲染,或者修改成序列帧,但是不是画质太低,就是有性能开销大。也尝试过使用videojs之类的播放器,但是很可惜 一旦开启autop
·
一、问题
这个问题其实一度困扰我很久了,类似小米浏览器、魅族浏览器等等手机的默认浏览器上,video标签的样式修改会无效,且一旦播放就会全屏,层级提升到最前,并且有不可修改的控制条,对前端做美化极其的不友好。
在解决这个问题的路上,尝试过很多方案,比如转换成mpeg,用canvas渲染,或者修改成序列帧,但是不是画质太低,就是有性能开销大。也尝试过使用videojs之类的播放器,但是很可惜 一旦开启autoplay属性 就会被浏览器劫持video组件。
在之后,偶然间研究B站的flv.js的时候,发现了意外的惊喜,video居然没有被浏览器劫持,之后经过仔细研究,最终得出结论,如果video的src绑定的是blob对象,也就是视频流的话,安卓默认浏览器因为认不出数据格式,就不会劫持video标签的渲染。
在这之后,事情就简单多了,只需要把需要播放的文件转换成流,喂入video就完事了,不过微信端由于软件的设置,必须有交互动作才可以播放视频,这点需要注意。
二、解决
我们项目是vue写的,原生js或者react理论上同理,部分代码如下:
<template>
<div class="home-page">
<video x5-video-player-type="h5"
:src="videoData"
:poster="require('@/assets/video/poster.jpg')"
autoplay
muted="muted"
ref="loopVideo"
loop
webkit-playsinline=""
playsinline=""
preload="metadata"
v-if="videoData!==null"
>
</video>
</div>
</template>
<script>
export default {
name: 'HomePage',
components: {},
data() {
return {
videoData:null,
}
},
props: {},
watch: {},
methods: {
init(){
let xhr = new XMLHttpRequest();
let _this = this;
/*通过get请求获取项目中的mp4文件流,因为axios修改responseType稍微有点麻烦,所以干脆写原生xhr请求了 */
xhr.open('GET', require('@/assets/video/loopVideo.mp4'), true);
//设置请求结果类型为blob
xhr.responseType = 'blob';
//回调
xhr.onload = function(e) {
if (this.status == 200) {
//创建blob对象,并把值赋给video的src
_this.videoData = URL.createObjectURL(this.response);
}
};
xhr.send();
}
},
computed: {},
created() {},
mounted() {
this.init()
}
}
希望这篇文章可以帮助苦于部分安卓默认浏览器兼容的人。
更多推荐
已为社区贡献2条内容
所有评论(0)