HTML视频播放与帧捕捉

最新推荐文章于 2021-06-21 15:44:14 发布

yjz764297625

最新推荐文章于 2021-06-21 15:44:14 发布

阅读量711

点赞数

分类专栏： html5 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yjz764297625/article/details/84544245

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

改代码功能为：

每隔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>

效果如下：

[img]http://dl2.iteye.com/upload/attachment/0095/6030/e2c78be0-7662-3160-a32d-0c366b4320e4.jpg[/img]

yjz764297625

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML视频播放与帧捕捉

改代码功能为：每隔5秒就会捕捉视频的一帧，并将其放在旁边的4*4的canvas上，当点击旁边canvas的帧时，视频就会回到该帧重新播放。[code="java"] var updateInterval = 1000;var frameWidth = 100;var frameHeight = 75;var ...
复制链接

扫一扫