通過監聽video的事件鈎子，使用canvas截取video的圖片
效果：
代碼（可直接在菜鳥教程的編輯器運行）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>要使用的視頻(autoplay要打開才能截取到圖片):</p> <video id="video1" controls width="270" autoplay> <source src="mov_bbb.mp4" type='video/mp4'> <source src="mov_bbb.ogg" type='video/ogg'> <source src="mov_bbb.webm" type='video/webm'> </video> <p>畫布 (代碼在每20毫秒繪制當前的視頻幀):</p> <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標簽。 </canvas> <p>圖片(將畫布的視頻幀同步生成圖片)：</p> <div id="imgbox"></div> <script> var v=document.getElementById("video1") var c=document.getElementById("myCanvas") var imgbox = document.getElementById('imgbox') var delay = 100 // 截取封面的延遲（有的視頻開頭可能有黑屏所以可以加一個延遲） ctx=c.getContext('2d'); // 監聽可播放 v.addEventListener('canplay', function() { setTimeout(function(){ // 相應視頻的寬和高 var w = v.videoWidth var h = v.videoHeight var space = 5 // canvas的間距，可取去掉 // 繪制視頻到canvas上 ctx.drawImage(v, space, space, w+space, h+space) // 生成圖片 let img = document.createElement('img') img.src = c.toDataURL('image/png') // 這就是封面圖片的地址 img.width = w // 圖片寬度，可按需調節，也可以不設置 img.height = h // 圖片高度，可按需調節，也可以不設置 imgbox.appendChild(img) // 打印圖片 }, delay) },false) // （其他鈎子，按需使用）
// 監聽播放 v.addEventListener('play',function() { // ... },false) // 監聽暫停 v.addEventListener('pause',function() { // ... },false) // 監聽播放結束 v.addEventListener('ended',function() { // ... },false) </script> </body> </html>
感謝菜鳥教程！
還未解決的問題：
當video的視頻是【跨域】時，toDataURL會報錯：
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
意思是canvas污染造成無法輸出。
等解決了再來補充。