How can I show the same HTML 5 Video twice on a website without loading it twice?

Question

I currently have 2 video elements on my html-page.
Both embed exactly the same .mp4 video from the same URL.

Is there any way to tell the browser to duplicate the rendered video from the first video element instead of letting the browser download both videos?

You can cleary see that the two videos are loaded seperated as they have a different buffering time before playback sometimes and the videos dont play synchronized everytime.

My Code:

<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

<video autoplay id="bigVideo"     data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

Answer 1

This can be done in some very easy steps via Javascript and the Canvas Element:

HTML:

<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>    
<canvas id="bigVideo"></canvas>

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var v = document.getElementById('previewVideo');
  var canvas = document.getElementById('bigVideo');
  var context = canvas.getContext('2d');
  var cw = Math.floor(canvas.clientWidth);
  var ch = Math.floor(canvas.clientHeight);
  canvas.width = cw;
  canvas.height = ch;
  v.addEventListener('play', function() {
    updateBigVideo(this, context, cw, ch);
  }, false);
}, false);


function updateBigVideo(v, c, w, h) {
  if (v.paused || v.ended) return false;
  c.drawImage(v, 0, 0, w, h);
  setTimeout(updateBigVideo, 20, v, c, w, h);
}

The canvas fetches the image of the video and displays it again on the BigVideo.
The updateBigVideo() function is called every 20ms, resulting in a framerate of about 50 FPS.

Read more

Answer 2

First, make the <video> element using JavaScript and then put it in the places you want.

var video1 = document.createElement("video");
video1["data-videoid"] = "JYpUXXD4xgc";
var sourceElem = document.createElement("source");
sourceElem.src = "video.php?videoid=JYpUXXD4xgc";
sourceElem.type = "video/mp4";
video1.appendChild(sourceElem);

var video2 = video1.cloneNode(true); //This makes a copy of the element, but makes sure it's not treated as the same element. This means you can add video1 AND this _different_ element to the document. However, unfortunately, everything still needs to get loaded again. I think this is the easiest way to copy an element over, though.
video2.id = "bigVideo";
video1.id = "previewVideo";

document.addEventListener("DOMContentLoaded", function() {
    //Now put video1 and video2 where you want.
});