videohtmlcanvas

html5: display video inside canvas


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!


Solution

  • 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></video>
      <canvas id="canvas"></canvas>
      <label>
        <br />Try to play me :)</label>
      <br />
    </div>