【我的代码】canvas 渲染 video （ios&android）

公司业务：做一个活动页，在活动页中插入视频，视频在页面中以动图显示。
需求点：自动播放，表现形式：动图（需要自动循环）
遇到的问题：
1.ios无法自动播放（需要用户触发动作才可以自动播放）
2.ios小程序 无法自动缓存视频，所以直接监听canplaythrough是无法触发的（需要用户触发动作才可以自动播放）
3.ios视频渲染canvas卡顿（通过监听timeupdate每帧进行渲染）

<video
      loop
      muted
      webkit-playsinline
      playsinline
      x5-video-player-type="h5"
      x5-video-player-fullscreen="false"
      x5-video-orientation="portraint"
      preload="auto"
      width="100%"
      height="100%"
      id="video1"
      controls
      class="videoBox"
      autoplay="autoplay"
    >
      <source src="ubr_20220622.mp4" />
    </video>
    <canvas id="canvas"></canvas>

       //获取Canvas上下文对象
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      let video = document.getElementsByTagName("video")[0];
      let isIphone = navigator.userAgent.toLowerCase().indexOf("iphone") >= 0;
      let pause = true; //暂停
      const event = isIphone?'touchstart':'click'

      refreshRem();
      //绘制视频
      render();

      video.addEventListener(
        "canplaythrough",
        function () {
          var promise = video.play();
          promise.then().catch((err) => {
            window.addEventListener(event, play);
          });
        },
        false
      );
      video.addEventListener(
        "ended",
        function () {
          //结束
          video.currentTime = 0;
          video.play();
        },
        false
      );
      if (isIphone) {
        window.addEventListener(event,play);
        video.addEventListener("timeupdate", function () {
          render();
        });
      }

      //视频播放
      function play(e){
        if(pause){
          video.play()
          pause = true;
         }
         e.preventDefault();
         window.removeEventListener(event,play)
      }
      //视频渲染
      function render() {
        window.requestAnimationFrame(render);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height); //绘制视频
      }

      function refreshRem() {
        video.style.display = "block";
        let { width, height } = video.getBoundingClientRect();
        videoWidth = document.documentElement.getBoundingClientRect().width;
        videoHeight = (videoWidth / width) * height;
        canvas.width = videoWidth;
        canvas.height = videoHeight;
        video.style.display = "none";
      }
      var tid = null;
      window.addEventListener(
        "resize",
        function () {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        },
        false
      );

咱就是说，这个业务实现，是为了防止用户视觉出现播放按钮等其他的操作台，那我在html直接把控制台禁止不行吗。。。这样还更高清

<div style="position:relative">
        <video
          loop
          muted
          webkit-playsinline
          playsinline
          x5-video-player-type="h5"
          x5-video-player-fullscreen="false"
          x5-video-orientation="portraint"
          poster="Faq4ABtKP18.jpeg"
          preload="auto"
          width="100%"
          height="100%"
          id="video1"
          class="videoBox"
        autoplay="autoplay"
        controlslist="nodownload nofullscreen noremoteplayback"
      >
          <source src="_20220622.mp4" type="video/mp4" />
      </video>
      <div id="noPointer" style="position: absolute;top: 0;bottom: 0;right: 0;left: 0;"></div>
      </div>
      
      
      let video = document.getElementsByTagName("video")[0];
      let isIphone = navigator.userAgent.toLowerCase().indexOf("iphone") >= 0;
      let pause = true; //暂停
      const event = isIphone?'touchstart':'click'
      document.getElementById('noPointer').addEventListener(event,function(e){
        e.preventDefault()
      },false)

      // refreshRem();
      //绘制视频

      video.addEventListener(
        "canplaythrough",
        function () {
          var promise = video.play();
          promise.then().catch((err) => {
            window.addEventListener(event, play);
          });
        },
        false
      );
      video.addEventListener(
        "ended",
        function () {
          //结束
          video.currentTime = 0;
          video.play();
        },
        false
      );
      if (isIphone) {
        window.addEventListener(event,play);
      }

      //视频播放
      function play(e){
        if(pause){
          video.play()
          pause = true;
         }
         e.preventDefault();
         window.removeEventListener(event,play)
      }