这段代码展示了如何在HTML5 canvas元素上实时绘制视频内容。当视频播放时，它会监听'play'事件，然后每30帧更新一次canvas，以实现视频帧的连续绘制。同时，代码还处理了'loadedmetadata'事件，以设置canvas的大小与视频尺寸相匹配。
小编典典
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, 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, 0);
setTimeout(loop, 1000 / 30); // drawing at 30fps
}
})();
}, 0);
Try to play me :)
2020-05-10
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
