js获取video标签的第一帧图片

冬天不会冷ll

于 2022-11-13 17:56:34 发布

阅读量2k

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/weixin_48567214/article/details/127834958

版权

   <video crossorigin="anonymous"
    @loadeddata="cutOneImg($event)" loop="false" preload="auto"
     autoplay="false" class="video-js myVideo"> </video>

@loadeddata监听这个事件，其他属性无关第一帧，
该事件会拿到元数据,

    cutOneImg(event) {
                    console.log(event)
                    const videoEle = event.target;
                    videoEle.currentTime = 1;
                    var canvas = document.createElement('canvas');
                    canvas.width = 320;
                    canvas.height = 150;
                    canvas.getContext('2d').drawImage(videoEle, 0, 0,canvas.width,canvas.height);
                    // 给封面图片
                    videoEle.poster = canvas.toDataURL('image/png');
                },