解决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 m