安卓浏览器video层级最高问题解决方案

8-12 15,755 views

先上一个完整的简单案例，能在ios和安卓手机上都解决视频层级和隐藏控制条的需求，

建议用手机查看：demo

在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手机上不会有此问题。

腾讯给出了如下解决方案：

但使用如上属性，视频播放时会全屏，且会将top bar挤掉（没试过的可以自行测试下），且只适用于微信，点此跳到腾讯相关开发说明

官方的方法走不通，其实可利用jsmpeg插件解决

jsmpeg是一个能将视频文件转为canvas播放的插件，详情可点击jsmpeg传送门了解

var player = new JSMpeg.Player('video.ts', {canvas: canvas, loop: true, autoplay: true});

使用该插件需要将视频mp4文件用ffmpeg转成.ts文件，ffmpeg可自行在ffmpeg官网下载

转换代码为（命令行）：

或自行加入并设置参数（参数设置可查看ffmpeg教程）：

ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -b:v 1000k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k out.ts

因篇幅问题，直接上demo源码地址：https://github.com/karlew/video-in-Android

demo中安卓上使用jsmpeg插件渲染canvas，ios上正常使用video并加入隐藏控制条等设置。

要注意的是，不要替换demo上的jsmpeg.js，因为demo的jsmpeg.js加入了视频开始播放和结束的监听回调，而原作者的没有回调设置

版权属于: karlew

转载时必须以链接形式注明原始出处及本声明。