Video&Audio（实例篇）

1、在Canvas上绘制视频影像

首先，实现在Canvas上实时传送并显示视频的功能。画面上分别拥有播放视频的video标签以及canvas标签，并赋值ID。根据视频的高度和宽度适当的进行缩小放大绘制在canvas。

第一种方法使用setTimeout()或者setInterval()来实现，第二种方法使用drawImage()方法在canvas中进行视频影像绘制，但是在Firefox3.6之前的版本效果不佳。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Canvas上绘制视频图像</title>
<style type="text/css">
	h1{
		background-color: hsla(0,0%,0%,0.50);
		position: relative;
		left: 0px;
		top:0px;
		text-align: center;
		width: 1330px;
		padding: 15px 0px;
	}
	#monitor{
		position: relative;
		left: 0px;
		top: 0px;
		background-color:aquamarine;
		text-align: center;
		padding: 10px;
	}
</style>
<script type="text/javascript">
	window.addEventListener("load",function(){
		var fps=1000/30;//1/30秒
		var videoObj=document.getElementById("myVideo");
		var canvasObj=document.getElementById("myCanvas");
		var btn=document.getElementById("btn");
		//第一种方法，建议
		setInterval(function(){
			//绘制
			canvasObj.getContext("2d").save();
			canvasObj.getContext("2d").scale(1/2,1/2);
			canvasObj.getContext("2d").drawImage(videoObj,0,0);
			canvasObj.getContext("2d").restore();
		},fps);
		//第二种方法，不建议
		/*
		videoObj.addEventListener("timeupdate",function(){
			canvasObj.getContext("2d").drawImage(videoObj,0,0);
		},true);
		*/
	},true);
	
</script>
</head>

<body>
<h1>HTML5 实时视频效果</h1>
<div id="monitor">
	<video id="myVideo" controls autobuffer loop width="640" height="360">
		<source src="../../source/白安 - 让我逃离平庸的生活_d00299x3pgx_3_0 [mqms].mp4">
		<p>请在支持video的浏览器中浏览</p>
	</video>
	<canvas id="myCanvas" width="640" height="360"></canvas>
</div>
</body>
</html>

Video&Audio（实例篇）

此例子中的视频资源是1280*720的宽比，放大二分之一。canvas是640*360的宽比。

--------------------------未完明天再更新

Video&Audio（实例篇）

1、在Canvas上绘制视频影像

相关推荐