html连贯读取帧,HTML视频播放与帧捕捉

改代码功能为：

每隔5秒就会捕捉视频的一帧，并将其放在旁边的4*4的canvas上，当点击旁边canvas的帧时，视

频就会回到该帧重新播放。

οnended="stopTimeLine()" autobuffer="true" width="400" height="300" >

var updateInterval = 1000;

var frameWidth = 100;

var frameHeight = 75;

var frameRows = 4;

var frameColums = 4;

var frameGrid = frameRows * frameColums;

var frameCount = 0;

var intervalId;

var videoStarted = false;

function updateFrame() {

var video = document.getElementById("movies");

var ctx = timeLine.getContext("2d");

var framePosition = frameCount % frameGrid;

var frameX = (framePosition % frameColums) * frameWidth;

var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;

ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth,

frameHeight);

frameCount++;

}

function startVideo() {

if (videoStarted) {

return;

}

videoStarted = true;

updateFrame();

intervalId = setInterval(updateFrame, updateInterval);

var timeLine = document.getElementById("timeLine");

timeLine.onclick = function(evt) {

var offX = evt.layerX - timeLine.offsetLeft;

var offY = evt.layerY - timeLine.offsetTop;

var clickedFrame = Math.floor(offY / frameHeight) * frameRows;

clickedFrame += Math.floor(offX / frameWidth);

var seekedFrame = (((Math.floor(frameCount / frameGrid)) * frameGrid) + clickedFrame);

if (clickedFrame > (frameCount % 16)) {

seekedFrame -= frameGrid;

}

if (seekedFrame < 0) {

return;

}

var video = document.getElementById("movies");

video.currentTime = seekedFrame*updateInterval/1000;

frameCount = seekedFrame;

}

function stopTimeLine(){

clearInterval(intervalId);

}

}

效果如下：