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