Question

I have a video playing in a video element in my main window. I would like to display the video in a cavas in a window I open() with JavaScript. (The original video element will be hidden, but it will still be responsble for playing the sound.)

I’m doing it like this.

<video id='video' style='display: none;' autoplay>
  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
  <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
  <source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
</video>

I open a new window and create a canvas element. Then I add a callback for each timeupdate event of the video in the main window. When this runs I copy the current frame of video to the canvas.

video.addEventListener("play", function() {
  var child = open("/echo/html/", "width=" + video.videoWidth + ",height=" + video.videoHeight);

  child.addEventListener("load", function() {
    var canvas = child.document.createElement("canvas"),
        g2d = canvas.getContext("2d");

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    child.document.body.appendChild(canvas);

    video.addEventListener("timeupdate", function() {
      g2d.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    });
  });
});

You can see this working here on jsfiddle but it doesn’t run smoothly. It seems like the function for timeupdate will not be called every time the frame changes. It is called less often.

How can I display the video in the external window at its full quality?

Answer 1

timeupdate() is designed for displaying video run-time and indeed may not run for every frame.

To have smooth animation loop, animate it using requestAnimationFrame() loop on the consumer side

• https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame

For each requestAnimationFrame call pull over the new video frame.