¿Cómo puedo mostrar el mismo video de HTML 5 dos veces en un sitio web sin cargarlo dos veces?

Actualmente tengo 2 elementos de video en mi página html.
Ambos incrustan exactamente el mismo video .mp4 de la misma URL.

¿Hay alguna manera de decirle al navegador que duplique el video renderizado desde el primer elemento de video en lugar de dejar que el navegador descargue ambos videos?

Puede ver claramente que los dos videos se cargan separados ya que tienen un tiempo de búfer diferente antes de la reproducción a veces y los videos no se reproducen sincronizados cada vez.

Mi código:

   

Esto se puede hacer en algunos pasos muy sencillos a través de Javascript y el Elemento Canvas:

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); } 

El canvas recupera la imagen del video y la muestra nuevamente en BigVideo.
La función updateBigVideo() se llama cada 20 ms, lo que da como resultado una tasa de fotogtwigs de aproximadamente 50 FPS.

Lea más aquí: http://html5doctor.com/video-canvas-magic/

Primero, haga que el elemento use JavaScript y luego colóquelo en los lugares que desee.

 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. }); 

Una solución simple puede ser agregar un valor al final de la url con #anything

Como está cargando el video en un elemento de video y desea volver a cargarlo en un elemento de video diferente, puede organizarlo como se muestra a continuación con una URL única :