vue video 视频第一帧设为封面

我是陶陶呀

已于 2022-12-02 11:32:58 修改

阅读量2.5k

点赞数 2

分类专栏： JavaScript基础文章标签：前端 javascript vue

于 2022-12-02 10:35:36 首次发布

本文链接：https://blog.csdn.net/weixin_43473561/article/details/128144046

版权

JavaScript基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<video class="videoBox" :src="`${resources}/course/${ele.url}`" controls="controls"
            @loadeddata="setVideoPoster($event)">
            您的浏览器不支持 video 标签。
          </video>

setVideoPoster(event) {
      let video = event.target;
      // video.height = video.clientHeight;
      let canvas = document.createElement("canvas"); // 创建 canvas
      const ctx = canvas.getContext("2d");
      video.currentTime = 1; // 第一帧
      video.oncanplay = () => {
        canvas.width = video.clientWidth; // 获取视频宽度
        canvas.height = video.clientHeight; //获取视频高度
        var img = new Image(); // 这里使用img是为了解决视频跨域 canvas.toDataURL会提示错误的问题
        img.onload = function () {
          // canvas绘图
          ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
          // 转换成base64形式并设置封面
          video.poster = canvas.toDataURL("image/jpeg", 1); // 截取后的视频封面
        }
      }
    }