前端视频取帧方法

capture = (url:string,width:number,height:number,screenPartNo:number) => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext('2d');
        let video = document.createElement("video");
        video.setAttribute('src', url);
        video.setAttribute('crossOrigin', 'anonymous');//处理跨域
        video.setAttribute('preload', 'auto');
        video.setAttribute('width', `${width}`);
        video.setAttribute('height', `${height}`);
        if(canvas){
            video.addEventListener('loadeddata', () => {
                canvas.width = width;
                canvas.height = height;
                ctx&&ctx.drawImage(video,0,0,width,height);
                let e = canvas.toDataURL('image/jpeg');  
            });
        }
    }
网上很多方案截图出来时黑屏，主要时视频未播放第一帧就是黑的，所以这里给视频设置了自动播放并截图，总觉得这样浪费资源，大家有更好的方案欢迎指教