使用 canvas 绘制视频

Lewis -

安卓/ios 对 video 兼容较差，使用 canvas 可以很好的解决播放/全屏/自定义控件问题

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi" />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
          .controls {
            margin: 10px;
          }
          .controls button {
            padding: 5px 10px;
            margin-right: 10px;
            border: none;
          }
          video {
            width: 375px;
            height: 160px;
          }
        </style>
    </head>

    <body>
      
      <div class="controls">
        <button id="play">播放</button>
        <button id="paused">暂停</button>
        <button id="hide-video">显示/不显示video</button>
      </div>
        
      <canvas
          id="canvas"
          width="375"
          height="160"
          style="background: #000"
      ></canvas>
      <video
          id="video"
          style="display: auto"
          width="100%"
          preload="auto"
          controls
          muted="true"
          playsInline="true"
          webkit-playsinline="true"
          x-webkit-airplay="true"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="false"
          x5-video-orientation="portraint"
      >
          <source src="https://assets.monogogo.cn/video/1598320823944_cps.mp4" type="video/mp4"></source>
      </video>
    </body>

    <script>
      var canvas = document.getElementById('canvas')
      var video = document.getElementById('video')
      var play = document.getElementById('play')
      var paused = document.getElementById('paused')
      var hide = document.getElementById('hide-video')
      var ctx = canvas.getContext('2d')
      var animation = null;

      play.addEventListener('click', function() {
        video.play()
        draw(video, canvas, ctx)
      })

      paused.addEventListener('click', function() {
        video.pause()
      })

      hide.addEventListener('click', function() {
        if(video.style.display === 'none') {
          video.style.display = ''
        } else {
          video.style.display = 'none'
        }

      })

      function draw(video, canvas, ctx) {
        if(video.paused || video.ended) {
          cancelAnimationFrame(animation)
        }
        ctx.drawImage(video, 0, 0, 375, 160)
        animation = requestAnimationFrame(function() {
          draw(video, canvas, ctx)
        })
      }
    </script>

</html>