vue实现html5视频显示缩略图

vue代码

最后生成一个图片地址给到变量，html可以直接使用显示缩略图

generateThumbnail() {
            const video1 = document.createElement('video');
            video1.preload = 'metadata';
            console.log("=====this video====", this.video);
            if (this.video == "") {
                return;
            }
            video1.src = this.video;

            console.log("=====vvvvvvvvvvvvvvvvvvv====", video1);

            // 当视频元数据加载完成时，设置canvas大小
            video1.onloadedmetadata = () => {
                console.log("viewo loaded=======",video1)
                const canvas = document.createElement('canvas');
                canvas.width = video1.videoWidth;
                canvas.height = video1.videoHeight;
                const ctx = canvas.getContext('2d');

                // 使用 video.oncanplay 事件确保视频可以播放
                video1.oncanplay = () => {
                    video1.currentTime = 1; // 跳到视频的第一秒
                    video1.onseeked = () => {
                        ctx.drawImage(video1, 0, 0, canvas.width, canvas.height);
                        this.thumbnail = canvas.toDataURL('image/jpeg');
                    };
                };
            };
        },