SOURCE

console 命令行工具 X clear

                    
>
console
var inputFile = document.getElementById('inputFile');

function readVideo (file) {
  var fr = new FileReader();
  fr.onload = function(e) {
    takeVideo(e.target.result)
  };
  fr.readAsDataURL(file);
}

function takeVideo(video){
  var videoDOM = document.createElement('video');
  videoDOM.src=video
  videoDOM.currentTime = 10;
  videoDOM.oncanplay=function(e){
    takeThumbnail(e.target)
  }
}
  
function takeThumbnail(videoDOM){
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d')
  canvas.width = 400;
  canvas.height = 300;

  ctx.drawImage(videoDOM,0,0, 400, 300);
  var img = document.getElementById('Thumbnail');
  img.src=canvas.toDataURL()
}

inputFile.addEventListener('change', function(e){
  readVideo(e.target.files[0])
})
<input type="file" id="inputFile" />
<img id="Thumbnail" src="" />