html5 video 如何獲取視頻第一幀

代碼我已經託管到 github上，有須要的小夥伴自行下載查閱~

歡迎提pullRequest or star

提供可供選擇的視頻連接 （下載使用）   

• media.w3.org/2010/05/...
• www.w3school.com.cn/ex...
• www.w3schools.com/htm...
• clips.vorwaertsgmbh.d...
• player.vimeo.com/exte...
• player.vimeo.com/exte...
• player.vimeo.com/exte..

一、視頻是同源的，不然須要處理跨域問題

var initialize = function() {
      output = document.getElementById("output");
      video = document.getElementById("video");
      video.addEventListener('loadeddata',captureImage);
    };複製代碼

二、截取第一幀代碼

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);複製代碼

三、建立canvas

var captureImage = function() {
      var canvas = document.createElement("canvas");
      canvas.width = video.videoWidth * scale;
      canvas.height = video.videoHeight * scale;
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      
      img = document.createElement("img");
      img.src = canvas.toDataURL("image/jpeg", 1.0);
      output.appendChild(img);
    };複製代碼

四、poster html5原生屬性

document.getElementById('video').setAttribute('poster','./cat.jpeg') //設置任意圖片第一幀複製代碼