Javascript HTML5显示视频的缩略图预览

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

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

document.getElementById（'browseVideos'）。addEventListener（'change'，handleVideoSelect，true）；
功能手柄选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将视频文件渲染为缩略图。
对于（var i=0；i

解决了它

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

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

---

您好，我一直在尝试您的解决方案，我们需要在哪里添加事件？此答案中给出的代码Matt9Atkins替换了

canvas.getContext（“2d”）。

。。。在他的问题中有一句台词。我已经验证了这一点（显然，只要浏览器支持播放所选的视频类型）。