HTML5 - Canvas的使用样例9（绘制视频帧，video视频截图）

2016-02-02 发布：hangge 阅读：5428

前面讲到使用 drawImage() 方法可以绘制图片。这个图片可以是临时创建的图片对象，也可以是页面已存在的 <img> 元素。

除了绘制图片，drawImage() 还可以绘制整个 <canvas> 元素（不是指当前这个），也可以绘制目前正在播放的 <video> 元素。

比如下面样例，当点击“截图”时就会捕获正在播放视频的当前帧画面，然后把该画面绘制到画布上。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>hangge.com</title>
 </head>
 <style>
	canvas {
	    border: 1px dashed black;
	}
 </style>

 <script>
	function draw() {
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");

		var video = document.getElementById("videoPlayer");
		context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
	}
</script>
 <body>
	 <video id="videoPlayer" src="hangge.mp4" controls width="200" height="150"></video>
	 <button onclick="draw()">截图</button>
	 <canvas id="myCanvas" width="300" height="180">
 </body>
</html>