jsmpeg 全屏_安卓微信视频播放全屏问题处理+利用ffmpeg转ts视频，通过jsmpeg.js播放...

或者

这篇文章

安卓全屏问题

视频全屏的H5专题十分收到业界喜欢, 虽然iOS下全屏自动播放并没有太大问题, 然而在安卓手机上，video组件全屏的时候会在顶层，好像”漂浮”在整个浏览器上面, 体验起来非常差. 除此之外, 即便采用JS给video设定为容器的宽高这方案, 也会出现难看的播放器控件,这时候不得不人为给视频底部加空白,在通过JS计算适合的高度以挡掉丑陋的播放器控件, 实在苦恼.

JSMpeg简介

偶然发现JSMpeg这个项目,能解决安卓全屏video漂浮问题问题.

它的原理就是JS解码视频, 用 WebGL & Canvas2D渲染出来,于是达到避免Video控件在安卓微信浏览器下产生的问题, 不过有一个需要说明的地方就是, 你需要用将你的视频文件(通常是mp4)转换成ts格式的视频文件, 并且 ,在iOS下的微信浏览器下, 使用jsmpeg播放ts文件, 是没有声音的,这个时候你可以另外添加对应的audio同步播放即可. (其实iOS我们直接使用video+mp4的方式,也用不到这个插件).

推荐使用http://ffmpeg.org/, 至于怎么安装就不再赘述.

生产ts视频文件命令：

$ ffmpeg -i input.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 output.ts

这个时候, 默认转换到最低的清晰度, 如果要调整清晰度, 可以像这样调整:

$ ffmpeg -i input.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b:v 1500k output.ts

JSMpeg调用