小编典典

html5:在画布内显示视频

html

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

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

context.drawVideo(vid, 0, 0);

谢谢!


阅读 454

收藏
2020-05-10

共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="false"></video>

  <canvas id="canvas"></canvas>

  <label>

    <br />Try to play me :)</label>

  <br />

</div>
2020-05-10