html5:在画布内显示视频 [英] html5: display video inside canvas

问题描述

是否可以将 html5 视频显示为画布的一部分?

基本上与在画布中绘制图像的方式相同.

context.drawVideo(vid, 0, 0);

谢谢！

解决方案

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var video = document.getElementById('video');video.addEventListener('播放'，函数(){var $this = this;//缓存(函数循环(){如果 (!$this.paused && !$this.ended) {ctx.drawImage($this, 0, 0);设置超时(循环，1000/30)；//以 30fps 绘制}})();}, 0);

我猜上面的代码是自解释的，如果没有在下面留下评论，我会尝试解释上面的几行代码

编辑:
这是一个在线示例，仅供您参考:)
演示

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var video = document.getElementById('video');//设置画布大小 = 已知视频大小video.addEventListener('loadedmetadata', function() {canvas.width = video.videoWidth;canvas.height = video.videoHeight;});video.addEventListener('播放', function() {var $this = this;//缓存(函数循环(){如果 (!$this.paused && !$this.ended) {ctx.drawImage($this, 0, 0);设置超时(循环，1000/30)；//以 30fps 绘制}})();}, 0);

<video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video><canvas id="canvas"></canvas><标签><br/>试着玩弄我:)</label><br/>

is it possible to display a html5-video as part of the canvas?

basically the same way as you draw an Image in the canvas.

context.drawVideo(vid, 0, 0);

thanks!

解决方案

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);

I guess the above code is self Explanatory, If not drop a comment below, I will try to explain the above few lines of code

Edit :
here's an online example, just for you :)
Demo

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);

<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>

这篇关于html5:在画布内显示视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！