安卓微信视频播放全屏问题处理视频全屏的H5专题十分收到业界喜欢, 虽然iOS下全屏自动播放并没有太大问题, 然而在安卓手

安卓全屏问题

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

JSMpeg简介

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

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

你可以使用convertio.co/zh/mp4-ts/在线转换, 不过更推荐使用ffmpeg.org/,至于怎么安装就不再赘述.

生产ts视频文件命令：

    $ ffmpeg -i 你的源文件.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 输出文件.ts

JSMpeg调用

	<canvas id = "canvas"></canvas>
	<script>
 	 var player = new JSMpeg.Player('video.ts', {
     	canvas: canvas, 
        loop: false,
        autoplay:true
     });  
  </script>

当然你也直接在HTML中使用

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

DEMO

点击这里体验Demo

或者直接扫描

本文来自thinkerchan.com