11

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>
1
  • You can definitely load a video in JS once and then call it as many times as you want throughout your page.
    – TylerH
    Jun 30, 2014 at 18:45

5 Answers 5

15

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

3
  • Really works like a charm, don't see s single stutter :) Jul 2, 2014 at 15:01
  • 4
    This may work, but the processing overhead of this is really high. The correct answer should probably be Noble Mushtak's. That's the one that worked for me. Also, this approach won't work if the video comes from another domain and the domain isn't CORS enabled. Oct 11, 2019 at 23:33
  • Could this method work if the video source was an iframe element? Eg, if the previewVideo was a playing YouTube embed?
    – JCraine
    Dec 22, 2021 at 10:46
9

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.
});
8
  • Wow, this is a great solution! I would't have thought of this, i will try this soon. Just a question, where is the videoElem from line 8 defined, do you mean video1 maybe? Jul 1, 2014 at 11:49
  • Sorry! Yes, I meant video1, not videoElem. Sorry about the confusion! Jul 1, 2014 at 12:32
  • I currently have place.prepend(video1); $('body').prepend(video2); video1.play(); video2.play(); directly after the video.id definition outside of the event listener because I start playing the videos in a custom js-function which is started on user interaction. Unfortunately only the last prepended video (video2 in this case) is added to the site, same if i switch the order of the two prepends. It seems like either jquery or the video element don't support adding nearly the same or the same element twice to one page. Could you help me at adding the two videos to the page? Jul 1, 2014 at 12:49
  • 1
    Oh...I guess you need to use the .cloneNode() method of video1. However, that means you need to load video1 over again, even if you're not writing out the code again. Jul 1, 2014 at 15:35
  • 1
    i tried using .cloneNode(), but as you already said both videos are loaded seperately again. Any other idea? Jul 1, 2014 at 17:15
1

Experimental feature of interest:

<video id="vid" src="test.mp4" autoplay loop muted></video>
<div style="background:-moz-element(#vid); background-size: cover; width: 1280px; height: 720px; "></div>

(firefox only and with -moz- prefix as of 2023)

https://developer.mozilla.org/en-US/docs/Web/CSS/element

https://w3c.github.io/csswg-drafts/css-images-4/#element-notation

-2

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

Since you are loading the video in one video element and want to load it again in a different video element, you can arrange it like below with 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>
1
  • 1
    I think you missunderstood my question, it was about telling the browser to "duplicate" or "copy" the rendered video from the first video element instead of letting the browser download both videos. You can find the solution i wanted here. Jul 8, 2014 at 13:00
-3

Most Optimal solution

let videoPlayCount = 1;
    let video = document.getElementById('amplify-mould-video');

    video.addEventListener('ended',videoHandler,false);
    function videoHandler() {
        if(videoPlayCount < 2){
            videoPlayCount++;
            video.play();
        }else{
            video.pause();
            video.removeEventListener('ended',videoHandler)
        }
    }
<video id="video" muted="" autoplay="" controls>
    <source src="#" type="video/mp4">
</video>

1
  • Hello salman, thank you for your answer. As far as i understand this code, this will play one video two times in a row. In contrast, my question here was how to play the same video source in two video elements or other canvas options at the same time - ideally without loading it from the network twice. Oct 25, 2021 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.