html5 video 如何获取视频第一帧

代码我已经托管到 github上，有需要的小伙伴自行下载查阅~

提供可供选择的视频链接 （下载使用）  

    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);

3、创建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);
    };

4、poster html5原生属性

document.getElementById('video').setAttribute('poster','./cat.jpeg') //设置任意图片第一帧