安卓全屏问题

视频全屏的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调用

<canvas id = "canvas"></canvas>
<script>
	 var player = new JSMpeg.Player('video.ts', {
    	canvas: canvas, 
       loop: false,
       progressive: true, //渐进加载,false的话则会先下载完再渲染
       autoplay:true
    });  
 </script>

当然你也直接在HTML中使用

<div class="jsmpeg" 
	data-url="video.ts" 
    data-loop="false" 
    data-autoplay="true">
</div>

缺点

虽然这个方案能实现安卓下canvas播放视频, 但本人实测,它实在是太耗性能了(华为p10都会卡), 并不像作者所说的的流畅.

JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at just 20kb gzipped.

所以究竟能不能用这个方案, 得根据需求自行斟酌.

DEMO

点击这里体验Demo

或者直接扫描