使用video视频帧作为图片源绘制canvas

最新推荐文章于 2024-05-27 19:00:00 发布

linziping

最新推荐文章于 2024-05-27 19:00:00 发布

阅读量2.4k

点赞数

文章标签： html5 canvas video 视频帧

本文链接：https://blog.csdn.net/linziping/article/details/122110416

版权

使用video视频帧作为图片源绘制canvas

1、在html页面加入canvas元素

<canvas id="canvas"></canvas>

2、在html页面中加入video元素及视频源

<video id="video" loop crossOrigin="anonymous" playsinline controls="" muted style="display: none;">
	<source src="videos/animate2.mp4" type='video/mp4'>
</video>

3、编写JS脚本绘制canvas画布

let width, height, rate;
let video = document.getElementById( 'video' );
let canvas=document.getElementById("canvas");
let ctx = canvas.getContext("2d");
 /*
  * oncanplay：视频可以播放事件
  * 此时readyState等于4(HAVE_ENOUGH_DATA)
  * 注:readyState等于0(HAVE_NOTHING)时videoWidth、videoHeight为0
  */
video.oncanplay = (event) => {
	// videoWidht、videoHeight视频原始宽度、高度(单位:px)
	width = video.videoWidth;
	height = video.videoHeight;
	
	rate = height/width;
	canvas.width = 600;
	canvas.height = 600*rate;
	video.play(); // 播放视频
	
	// 判断HTMLVideoElement是否支持requestVideoFrameCallback()方法
	if ( 'requestVideoFrameCallback' in video ) {
		// 下此视频帧呈现时触发回调
		video.requestVideoFrameCallback( updateVideo );
	}
}
    	
/*
 * 根据当前视频帧绘制图片
 */
function updateVideo(){
    ctx.drawImage(video, 0, 0, 600, 600*rate);// 使用视频帧(当前帧)绘制canvas
    video.requestVideoFrameCallback( updateVideo );
 }