编辑您的代码：提交代码

​x
 
1
2
3
<!DOCTYPE html>
4
<html>
5
<body>
6
​
7
<p>要使用的视频：</p>
8
​
9
<video id="video1" controls width="270" autoplay>
10
  <source src="/example/html5/mov_bbb.mp4" type='video/mp4'>
11
  <source src="/example/html5/mov_bbb.ogg" type='video/ogg'>
12
  <source src="/example/html5/mov_bbb.webm" type='video/webm'>
13
</video>
14
​
15
<p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>
16
​
17
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
18
Your browser does not support the HTML5 canvas tag.
19
</canvas>
20
​
21
<script>
22
​
23
var v=document.getElementById("video1");
24
var c=document.getElementById("myCanvas");
25
ctx=c.getContext('2d');
26
​
27
v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);
28
v.addEventListener('pause',function() {window.clearInterval(i);},false);
29
v.addEventListener('ended',function() {clearInterval(i);},false);
30
​
31
</script>
32
​
33
</body>
34
</html>
35
          

查看结果：

请在上面的文本框中编辑您的代码，然后单击提交按钮测试结果。w3c0.com

W3c0.com 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3c0 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。 当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。 鲁ICP备15022115号