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

Answer 1

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

HTML:

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