实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
x
 
1
<html>
2
<body>
3
4
<p>Video to use:</p>
5
<video id="video1" controls width="270" autoplay>
6
  <source src="/upload/love/movie.mp4" type='video/mp4'>
7
  <source src="mov_bbb.ogg" type='video/ogg'>
8
  <source src="mov_bbb.webm" type='video/webm'>
9
</video>
10
11
<p>Canvas (the code draws the current frame of the video every 20 millisecond):</p>
12
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
13
您的浏览器不支持 HTML5 canvas 标签。</canvas>
14
15
<script>
16
17
var v=document.getElementById("video1");
18
var c=document.getElementById("myCanvas");
19
ctx=c.getContext('2d');
20
21
v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);},false);
22
v.addEventListener('pause',function() {window.clearInterval(i);},false);
23
v.addEventListener('ended',function() {clearInterval(i);},false);  
24
25
</script>
26
27
</body>
28
</html>
29