Solve the video level problem of H5 Android's built-in browser

 

1. Problems

  The video tag will be at the highest level by default in the Android built-in browser. And it will be automatically fixed at the top of the page, and the loop attribute will be invalid

  Usually if the video needs to play automatically, we will write like this:

<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>

  The x5 attribute is only for Tencent-based browsers, but since Android's built-in browser is not an x5 kernel, it is naturally invalid. And does not support the writing of zIndex.

Two, solve

   convert video to canvas

  2.1 Installation   

npm i jsmpeg
brew install ffmpeg

 ffmpeg is a video stream format conversion plugin. jsmpeg only supports videos in mpg format. So you need to convert the corresponding video to mpg format. Command line input:

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

The video in the specified format can be generated in the directory of the current converted file.

2.2 Introduction 

<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();
  }

It is recommended to use this method only on h5 and control the video size, because it is more performance-intensive, and if the video is too large, the canvas drawing speed will be very slow.