How can I display the same HTML 5 Video twice on a website without downloading it twice?

Question

I currently have 2 video elements in my html page.
Both embed the exact same .mp4 video from the same URL.

Is there a 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 clear that two videos are downloaded separately, as they sometimes have different buffering times before playing, and the videos are not played back each time synchronized.

My code is:

 <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 with a few very easy steps using Javascript and 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 retrieves the video image and displays it again on BigVideo.
The updateBigVideo() function is called every 20 ms, which results in a frame rate of about 50 FPS.

More details here: http://html5doctor.com/video-canvas-magic/

Answer 2

First create a <video> element using JavaScript, and then put it in the right places.

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

Answer 3

A simple solution would be to add a value to the end of the url with #anything

Since you upload a video to one video element and want to load it again in another video element, you can arrange it as shown below using a unique url:

 <video autoplay id="mainVideo"> <source src="video.php?videoid=JYpUXXD4xgc&item=1" type="video/mp4"/> </video> <video autoplay id="previewVideo"> <source src="video.php?videoid=JYpUXXD4xgc&item=2" type="video/mp4"/> </video>