一、问题

这个问题其实一度困扰我很久了，类似小米浏览器、魅族浏览器等等手机的默认浏览器上，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')"autoplaymuted="muted"ref="loopVideo"loopwebkit-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);//设置请求结果类型为blobxhr.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()}
}

希望这篇文章可以帮助苦于部分安卓默认浏览器兼容的人。

解决video标签在部分安卓默认浏览器上的播放样式问题相关推荐

（已解决）video标签在ios端默认全屏播放（h5开发）
Video在ios全屏播放这两天一直在做h5开发,项目马上完结,就是到最后项目上线之后,在ios上面测试,突然发现原来的视频默认全屏播放,这样就有很大的限制,很不利于开发,我这边是已经解决这个问题了 ...
HTML5中关于解决video标签禁止右键和下载视频的办法
近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户.消息.项目.分享.文件提取.收藏.回收站等主要功能,领挖还有一些office.压缩包.图片.文本.音频和视频的预览功能. 音频我使用的是 ...
小程序video标签在（华为手机）无法播放.mp4长视频（ios上正常）
问题场景后台上传了有一个大小为700+M的视频文件,结果在小程序播放页面加载一会就会黑屏,并且视频时长也没有解析成功,但是视频路径在浏览器访问是没有问题的.(当时是在小米手机出现该bug) 分析问题 ...
关于使用video标签插入视频时，视频无法播放的问题
写代码遇到一个问题:使用video标签插入视频时,在chrome中无法播放,只显示了一个封面图片,在ie却可以播放. video的使用是看别人的: 由于照搬别人的代码,我写的代码如下: <vid ...
解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题
背景制作的H5项目,使用vedio标签,利用wx.getNetworkType来自动播放背景音乐. 但是安卓的vedio自动播放被微信浏览器限制了. 解决方案采用web vedio api 细节解 ...
多个video标签，控制最多只能一个同时播放
添加一个事件: @play="handlePlay(index)" <divv-for="(item, index) in videoUrlList":k ...
微信内置浏览器在使用video标签时（安卓）默认全屏的原因及解决办法
根据X5论坛得到的答案是:设计如此. 腾讯真是越来越嚣张了,一家独大后用户体验都不注重了(不给程序员留活路). 听说有个申请加入vdeo白名单的,域名验证后就可以解决默认全屏(反正我是没见过申请入口, ...
uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放
<video :src="url" controls id="videoId" @play="play"@fullscreenchan ...
安卓和前段交互——视频播放video标签横竖屏
第一和前段交互做视频的播放记录一下.需求:前段播放视频可以全屏点击,点击全屏按钮原生横屏,点击取消横屏原生竖屏. 问题:一开始做的时候因为对webview的WebChromeClient里面的方法了 ...

解决video标签在部分安卓默认浏览器上的播放样式问题

一、问题

二、解决

解决video标签在部分安卓默认浏览器上的播放样式问题相关推荐

最新文章

热门文章