I'm developing a webapp whose main feature is that it has different angle recordings of the same event and as you play a video, you can immediately change to another recording, keeping also the position in your video. Actually, the webapp already works, I can load another video and position it from JS code but there is a small lag in between. What I would like to achieve is to make the change totally seamless, completely immediate. Do you have any idea how I could achieve that?
The code is in React, this is how the relevant part looks like at the moment:
const videoRef = useRef<HTMLVideoElement>(null);
const setTrackUrl = (url: string) => {
const video = videoRef.current!;
const currentTime = video.currentTime || 0;
video.addEventListener("loadeddata", () => {
video.currentTime = currentTime;
})
video.setAttribute('src', url);
video.load();
video.play();
}
So I would need to instruct the browser to keep playing the video until the new one is loaded but I don't find any API call for that.
One common way to achieve this type of immediate switch between videos on a browser is to have multiple video elements in your page and to hide and show them as needed.
For example, you could have your current video, videoRef in your code, playing and visible and create a new video, e.g. videoRef2, load it and start playing but hide it until you are ready to switch. When you want to switch you show the new video and hide the original one.
If you have only one or two angles in your application then you can probably have all the videos streaming all the time. If you have more than that then the browser processing and streaming overhead will likely become too high to stream them all simultaneously so you may want some logic in your app to try to predict the most likely next angle the user will choose.