HTML5视频和画布

Question

我有一个视频，我需要在不同的时间从它捕获3个图像。时间不是随机的，我必须在指定时间拍摄图像（13:10:02，13:10:03，13:10:04）。当我访问页面时，图片应该显示在页面上，而不是当我点击一个按钮或类似的东西时。 到现在为止，我尝试了一个我在互联网上找到的例子，但在这个例子中，点击一个按钮后，图像显示出来，我不知道如何给出指定的时间。

<video controls> 
    <source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"></source> 
    <source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"></source> 
</video> 
<canvas id="canvas" width="640" height="480"></canvas> 
<button id="snap" onclick="snap()">Snap Photo</button> 

<script> 
    var video=document.querySelector('video'); 
    var canvas=document.querySelector('canvas'); 
    var context=canvas.getContext('2d'); 
    var w,h,ratio; 
    //add loadedmetadata which will helps to identify video attributes...... 
    video.addEventListener('loadedmetadata',function() 
    { 
     ratio=video.videoWidth/video.videoHeight; 
     w=video.videoWidth-100; 
     h=parseInt(w/ratio,10); 
     canvas.width=w; 
     canvas.height=h; 
    },false); 
    ///define a function 

    function snap() 
    { 
     context.fillRect(0,0,w,h); 
     context.drawImage(video,0,0,w,h); 
    } 
</script> 

Answer 1

您可以设置时间，为此，框架要画到画布上，通过视频对象上设置currentTime。
然后，您需要等待视频才能完成搜索，将视频拖到画布上移动到下一帧。
当然，在开始绘制帧之前，您需要等待视频加载。在MacOS 10遗憾的是一直被称为来自新位置的第一帧之前火“seeked”事件

var images = [ // defined canvases and times for frames 
    { 
     canvas: '#canvas1', 
     time: 10.0 // in seconds 
    }, 
    { 
     canvas: '#canvas2', 
     time: 19.0 
    }, 
    { 
     canvas: '#canvas3', 
     time: 26.0 
    }, 
]; 

function drawFrame(video, time, canvas, callback) 
{ 
    var context = canvas.getContext("2d"); 
    video.addEventListener("seeked", function(e) { 
     e.target.removeEventListener(e.type, arguments.callee); // remove the handler or else it will draw another frame on the same canvas, when the next seek happens 
     context.fillRect(0, 0, canvas.width, canvas.height); 
     context.drawImage(video, 0, 0, canvas.width, canvas.height); 
     callback(); 
    }); 
    video.currentTime = time; 
} 
function draw(video, images, i) 
{ 
    if (i >= images.length) 
     return; 
    drawFrame(video, images[i].time, images[i].canvas, function() { 
     draw(video, images, i+1); 
    }); 
} 
var video = document.createElement('video'); 
video.addEventListener('loadedmetadata', function() // when the metadata is loaded set the canvases size and start drawing frames 
{ 
    var ratio = video.videoWidth/video.videoHeight; 
    var w = video.videoWidth - 100; // set the width of the images to 100 px less than the video 
    var h = w/ratio; // fix the height accordingly 
    for (var i=0; i<images.length; i++) 
    { 
     images[i].canvas = document.querySelector(images[i].canvas); 

     images[i].canvas.width = w; 
     images[i].canvas.height = h; 
    } 

    draw(video, images, 0); 
}); 
video.src = "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"; 

JSFiddle