解决H5安卓自带浏览器video层级问题

 

一、问题

  video标签在安卓自带浏览器下会默认处于最高层级。且会自动fixed在页面上方，loop属性失效

  通常如果需要video自动播放，我们会这样写：

<video
    style={
   
   { width: '100%', height: '100%',objectFit:'fill' }}
    loop
    autoPlay
    muted
    ref={this.videoRef}
    webkit-playsinline="true"
    x-webkit-airplay="true"
    playsinline="true"
    x5-video-player-type="h5-page"
    x5-video-player-fullscreen="false">
    <source src={'video.mp4'} />
</video>

  x5属性只针对腾讯系的浏览器，但是由于安卓自带浏览器不是x5内核，所以自然无效。且不支持zIndex的写法。

二、解决

   将video转化 为canvas

  2.1 安装   

npm i jsmpeg
brew install ffmpeg

 ffmpeg为视频流格式转换插件。 jsmpeg只支持mpg格式的视频。所以需要将对应的视频转换成mpg格式。命令行输入：

ffmpeg -i video.mp4 -f mpeg1video -vf "crop=iw-mod(iw\,2):ih-mod(ih\,2)" -b 0 video.mpg

即可在当前转换文件的目录下生成指定格式的视频。

2.2 引入 

<canvas id="launchpad-h5" style={
   
   {height: '220px', width: '100%'}}/>

let launchpadH5 = document.getElementById('launchpad-h5')
  if(launchpadH5){
    let player = new jsmpeg('video.mpg', {
      canvas: document.getElementById('launchpad-h5'),
      video: true,
      loop: true,
      autoplay: true,
    });
    player.play();
  }

建议只在h5上使用这个方法并控制视频大小，因为比较耗费性能，视频如果过大画布绘图速度会很慢。