How to synchronize two videos with the same source when they're playing/buffering

In the application's home/landing page, I placed two videos with autoplay and no controls that the user would see.

Both videos use the same source of an MP4 video of approx. 90MB in size:

<source src={VIDEO_SRC} type="video/mp4" />

The first video is of bigger size, is in the background and has a blur effect, so it's just there to improve the visual appearance.

        <video
          key="big-video"
          loop
          muted
          autoPlay
          preload="none"
          poster="/MainVideoPoster.jpg"
          className="w-full h-full object-cover object-center blur-sm"
        >
          <source src={VIDEO_SRC} type="video/mp4" />
        </video>

The second video is on top of the blurred video. This is the one that the user would watch.

        <video
          key="small-video"
          loop
          muted
          autoPlay
          preload="none"
          poster="/MainVideoPoster.jpg"
          className="w-full h-full object-contain object-center screen-md:object-contain"
        >
          <source src={VIDEO_SRC} type="video/mp4" />
        </video>

The idea is to achieve something similar to what you can find on this page: here

These are the problems that I noticed:

• It feels like the browser is downloading the video twice instead of once, even though both videos have the same source and are on the same page (second on top of first)

• The videos are not synchronized. E.g. the first one pauses due to buffering, the second one doesn't pause at the same time, and it becomes noticeable that the blurry video isn't displaying the same frame as the normal video on top of it.

How can I synchronize both videos and make sure that the same source is being downloaded?

Is there a better way to achieve this?

Thank you!

Unfortunately, the mediaGroup property which let you achieve just what you wanted is out of specifications and browsers are removing it...

Also, be aware that even LoL website has this problem.

But, that won't stop us...

The tools you have at hand is a way to change playback rate, get and set current time.

There are also events available to you so you can react when a video stops for buffering etc.

// Check canplay event to know when both videos are ready to play and start them.
let video1ready,video2ready  = false;
function tryStart(){
    if(video1ready && video2ready){
        video1.play();
        video2.play();
    }
}
video1.on('canplay',()=>{
    video1ready = true;
    tryStart();
});
video2.on('canplay',()=>{
    video2ready = true;
    tryStart();
});
// Stopped to load next frame, make the other video wait too.
video1.on('waiting',()=>{video2.pause();});
video2.on('waiting',()=>{video1.pause();});
// Resumed from buffering, continue playing the other video too.
video1.on('playing',()=>{video2.play();});
video2.on('playing',()=>{video1.play();});

So, basically with this, we may be able to get a lot closer to sync. The idea is to simply make both video play/pause if/when the other is changing state.

Now, another approach could also be to monitor the playTime and sync those together. This is somewhat very easy, but if buffering occurs this can get messy as the running video will be jittering while playing and being seek back a few milliseconds.

You could have a check every X milliseconds and synchronize both videos:

// Set video1's time to video2's, every 250 millisecond.
setInterval(()=>{
    video1.currentTime = video2.currentTime;
},250);

A more elegant solution than just making the video jump is to make it catch up, or slow down the fastest so they both get back on track together... I'd say slowing down the fartest would make more sense, as speeding up would requires more frames faster and buffering would keep happening. You can play with the playback speed, setting it at 0.8 let's say instead of 1. In an interval, like above.

setInterval(()=>{
    const delta = Math.abs(video1.currentTime - video2.currentTime);
    if(delta  <.01 && delta > 0){ // Both videos are very close, let's sync them the hard way.
        video1.currentTime = video2.currentTime;
    }
    if(delta > .01){
        if(video1.currentTime > video2.currentTime){
            // Set the playbackRate lower, according to how many milliseconds we need to catch in the 250ms loop. Without setting lower than 0.8 or it would be too visible.
            video1.playbackRate = Math.max(0.8,1-(delta/.250));
        }else{
            video2.playbackRate = Math.max(0.8,1-(delta/.250));
        }
    }
},250);

I have not tested anything, but the theory is there and it should work at least OK. The numbers are all arbitrary, you may need to play with them to have the desired effects.

Also, I am using setInterval but maybe requestAnimationFrame would make things better and more accurate.

--

I just realized I covered the synchronisation part and nothing about having one source for two videos. This is simply because there is no way to have that. As others suggested, use a scaled down source for the blurred video, you could have it very well optimized even with compression artifacts. They will not show when blurred.