html5：在画布内显示视频

Question

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

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

 context.drawVideo(vid, 0, 0);

谢谢！

原文由 clamp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 <div id="theater">
  <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls></video>
  <canvas id="canvas"></canvas>
  <label>
    <br />Try to play me :)</label>
  <br />
</div>

原文由 user372551 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个使用更现代语法并且比已经提供的语法更简洁的解决方案：

 const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");

video.addEventListener("play", () => {
  function step() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
});

一些有用的链接：

• window.requestAnimationFrame() 的 MDN 文档
• 我可以使用 requestAnimationFrame 吗？

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议