解决video标签在手机移动端层级高无法控制以及无法自动播放的问题

video标签 在安卓手机有个坑,就是 层级始终最高.我想实现在video 标签上 漂浮一个按钮 ,始终无法实现,无法使用视频video标签做背景

还有个问题就是手机端的video无法实现自动播放,模拟点击事件也不行,必须要用户真实的点击

解决方法:

1.写一个定时器,然后使用canvas进行绘制

2.使用jsmpeg插件(也是利用canvas)

我使用jsmpeg制作了个demo:

jsmpeg通过canvas播放视频,解决了video标签在安卓浏览器上层级最高的问题,同时实现了视频的自动播放。

github地址:https://github.com/crazyming9528/PlayVideoOnAndroidWeb

网页示例:
https://case.crazyming.com/?link=web/PlayVideoOnAndroidWeb
https://crazyming9528.github.io/PlayVideoOnAndroidWeb/

jsmpeg插件:https://github.com/phoboslab/jsmpeg

使用插件前需要将视频转换成ts格式

推荐使用ffmpeg转换:http://ffmpeg.org/

转ts的参数：

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

使用的时候 首先判断下设备是安卓手机 再加载jsmpeg,其他设备 就使用video标签就好,video标签在微信端需要配置一些x5的特有属性,推荐 如下:

  <video   ref="video"
          class="video"
          preload="auto"
          x-webkit-airplay="allow"
          autoplay
          loop
          x5-video-orientation="portraint"
          webkit-playsinline="true"
          playsinline="playsinline"
          x5-playsinline="true"
          x5-video-player-fullscreen="true"
          src="1.mp4">
   </video>

在vue 项目中使用jsmpeg 在低端安卓机上 会异常卡顿,原因未知,我目前的解决方法是用iframe嵌套一个jsmpeg网页