HTML视频播放与帧捕捉 -

yangjianzhouctgu

浏览: 428636 次
性别:
来自: 上海

最近访客更多访客>>

xubiao8716

Demo_

jiazhigang

chenweichu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML视频播放与帧捕捉

博客分类：

html5

改代码功能为：

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

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

 <!doctype html>

<html>
	<video id="movies" autoplay oncanplay="startVideo()"
		onended="stopTimeLine()" autobuffer="true" width="400" height="300" >
	<source src="392612.mp4" />
	</video>

	<canvas id="timeLine" width="400px" height="300px"></canvas>

	<script type="text/javascript">
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);
	}
}
</script>
</html>

效果如下：