js获取视频第一帧作为封面

最新推荐文章于 2024-07-15 14:11:16 发布

pistachioʕ̯•͡˔•̯᷅ʔ

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量143

点赞数 3

分类专栏： canvas 文章标签： javascript 音视频前端

本文链接：https://blog.csdn.net/qq_48499167/article/details/139530726

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<video
      id="myVideo"
      alt="my video"
      controls
      crossorigin="anonymous"
      width="50%">
      <source src="video" type="video/mp4"/>
            Your browser does not support the video tag.
</video>

handleFirstImg() {
      const video = document.getElementById("myVideo");
      video.addEventListener(
          "loadedmetadata",
          () => {
            // 设置视频的暂停位置为0.01秒，以获取第一帧画面
            video.currentTime = 0.01;
          },
          false
      );
      video.addEventListener("seeked", () => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        // 将视频的第一帧绘制到canvas上
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        // 将canvas上的图片转换为base64格式的数据
        // this.coverImage = canvas.toDataURL();
        const img = canvas.toDataURL()
        console.log(img)
      })
    }