Skip to content
安卓浏览器视频层级永远顶层问题解决方案
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
.gitattributes
.gitignore
README.md
ffmpeg命令.txt
index.html
out.ts
video.mp4

README.md

为什么要有这个项目?

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

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

  <video src="http://xxx.mp4" x5-video-player-type="h5"/>

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

官方的方法走不通,其实可利用jsmpeg插件解决, jsmpeg是一个能将视频文件转为canvas播放的插件,详情可点击jsmpeg传送门了解 于是有了这个项目

如何使用

使用jsmpeg插件需要将视频mp4文件用ffmpeg转成.ts文件,ffmpeg可自行在ffmpeg官网下载 转换代码为(命令行):

    ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts

或自行加入并设置参数(参数设置可查看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

然后js中调用JSMpeg插件

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

在线演示DOMO

http://wx.karlew.com/tongceng/

注意

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

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

You can’t perform that action at this time.