HTML5显示视频的缩略图预览

我有一个输入文件字段，允许用户上传视频文件。在选择文件时，我希望视频的缩略图在用户决定上传文件之前显示为预览。出于某种原因，图像预览不显示。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); 
}

来源

2015-10-22 Matt9Atkins

解决了！

我需要添加一次视频数据加载

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

来源

2015-10-22 17:43:27 Matt9Atkins

喜绘制在画布上，我一直在努力解决方案，我们需要添加事件的事件？ – apr

Matt9Atkins在这个答案中给出的代码替换了他的问题中的'canvas.getContext（“2d”）“......行。我已经证实这是有效的（只要浏览器支持播放被选择的视频类型，显然）。 – tremby

HTML5显示视频的缩略图预览

回答

相关问题