自己弄小demo,在html5+js中获取视频的第一帧为遮罩图,qq录制的视频video无法播放,可播放的视频获取图片后是空白的?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>截取视频第一帧作为封面</title>
  </head>
  <body>
    <video
      controls="controls"
      src="./assect/20230705144108.mp4"
    ></video>
    <script>
      const video = document.querySelector("video");
      video.currentTime = 1
      const img = document.createElement("img");
      const canvas = document.createElement("canvas");
      video.onloadeddata = function () {
        console.log("触发方法");
        const ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, 360, 640);
        img.src = canvas.toDataURL("image/png");
        document.body.appendChild(img);
        console.log(img);
      };
    </script>
  </body>
</html>

百度看到要设置视频播放的初始时间 当我设置 video.currentTime = 1 时就报错
image.png

image.png

阅读 2.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题