//获取视频封面作为缩略图: captureVideoImage() { let videoArr = document.querySelectorAll('.swipe-video'); let _this = this; for (let i = 0; i < videoArr.length; i++) { //loadeddata当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。 //浏览器支持:所有主流浏览器都支持 loadeddata 事件。注释:Internet Explorer 8 或更早的浏览器不支持该事件。 let video = videoArr[i]; video.addEventListener( 'loadeddata', function() { let canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; video.setAttribute('crossorigin', 'anonymous'); //跨域设置,后端也需要设置CORS为* canvas .getContext('2d') .drawImage(video, 0, 0, canvas.width, canvas.height); let dataUrl = canvas.toDataURL('image/png'); let pareantNode = video.parentNode; let imgNode = document.createElement('img'); imgNode.src = dataUrl; if (video.videoWidth > video.videoHeight) { imgNode.style.height = '100%'; } else { imgNode.style.width = '100%'; } pareantNode.appendChild(imgNode); video.pause(); console.log(dataUrl, 'dataUrl'); _this.feedbackImages[i].dataUrl = dataUrl; }, false ); } }, //设置video封面海报poster: setPoster() { let videoArr = document.querySelectorAll('.swipe-video'); for (let i = 0; i < videoArr.length; i++) { let video = videoArr[i]; video.setAttribute('crossorigin', 'anonymous'); let canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; video.addEventListener( 'loadeddata', function() { canvas .getContext('2d') .drawImage(video, 0, 0, canvas.width, canvas.height); let dataUrl = canvas.toDataURL('image/png'); video.setAttribute('poster', dataUrl); console.log(dataUrl, 'dataUrl'); video.pause(); }, false ); } },
标签:canvas,封面,dataUrl,缩略图,js,let,videoArr,video,height From: https://www.cnblogs.com/ruyijiang/p/17606119.html