HTML5显示视频的缩略图预览

Question

我有一个允许用户上传视频文件的输入文件字段。在选择文件时，我希望视频的缩略图在用户决定上传文件之前作为预览显示。由于某些原因，图像预览没有显示。

<input type="file" name="browseVideos" id="browseVideos" multiple="multiple" accept="video/*">
<output id="listVideos"></output>
document.getElementById('browseVideos').addEventListener('change', handleVideoSelect, true);
 function handleVideoSelect(evt) {
    var files = evt.target.files; // FileList object
    // Loop through the FileList and render video files as thumbnails.
    for (var i = 0; i < files.length; i++) {
        var f = files[i];
        // Only process video files.
        if (!f.type.match('video.*')) {
            continue;
        }
        createVideoCanvas(f);
    }
 }
function createVideoCanvas(f){
  var vid = document.createElement('video');
  vid.src = window.URL.createObjectURL(f);
  var canvas = document.createElement('canvas');
  canvas.width  = 105;
  canvas.height = 100;
  canvas.getContext("2d").drawImage(vid, 0, 0, 100, 100);
  window.URL.revokeObjectURL(f);                
  document.getElementById('listVideos').appendChild(canvas);
 }

Answer 1

解决了!

我需要添加一个事件，在视频数据加载后绘制画布

  vid.addEventListener('loadeddata', function() {
      canvas.getContext("2d").drawImage(vid, 0, 0, 100, 100);
}, false);