解决方法
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var video = document.getElementById('video'); video.addEventListener('play',function () { var $this = this; //cache (function loop() { if (!$this.paused && !$this.ended) { ctx.drawImage($this,0); setTimeout(loop,1000 / 30); // drawing at 30fps } })(); },0);
我猜上面的代码是自我解释,如果没有下面的评论,我会尝试解释上面几行代码
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var video = document.getElementById('video'); // set canvas size = video size when kNown video.addEventListener('loadedMetadata',function() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; }); video.addEventListener('play',function() { var $this = this; //cache (function loop() { if (!$this.paused && !$this.ended) { ctx.drawImage($this,0); setTimeout(loop,1000 / 30); // drawing at 30fps } })(); },0);
<div id="theater"> <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video> <canvas id="canvas"></canvas> <label> <br />Try to play me :)</label> <br /> </div>
原文地址:https://www.jb51.cc/html5/169266.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。