Gapless Transition from Video to Video using html5

Question

I am trying to create a feature where a user can change (back and forth) between multiple videos while maintaining a single consistent audio. Think of being able to watch a concert from multiple angles but listening to a single audio. The trouble I am having with this feature is that there can not be a lag between the changes in video or the audio will no longer sync with the videos (especially true after multiple changes).

I have tried two methods, both using html5 only (I would prefer not use flash although I will eventually have a fallback) that have not worked seamlessly, although depending on the browser and hardware, it can come very close.

Basic Methods:

Method 1: Preloading all videos and changing the video src path on each click using javascript

Method 2: Again preloading video and using multiple tags and changing between them using javascript on each click.

Is there anyway to get either of these two methods to work seamlessly without a gap? Should I be using a slight of hand trick, like playing both videos concurrently for a second before revealing the second and stoping the first? Can this just not be done with html5 players? Can it be done with flash?

I have seen this type of question a couple of times with both video and audio with no clear solution, but they were a couple of months old and I was hoping there is now a solution. Thanks for the help.

I guess Method 2 is the closest you can get, I tried the same (with HTML5 video) and experienced a short gap. — Dmitry Pashkevich, Jun 27 '12 at 14:29
Thanks. This is basically what I ended up going with but with some additions. — bennygubear, Jul 03 '12 at 19:11

Dmitry Pashkevich · Answer 1 · 2014-06-11T05:08:24.467

Worth adding that it is possible with the MediaSource API proposed by Google. This API allows you to feed arbitrary binary data to a single video element, thus if you have your video split into chunks you can fetch those chunks via XHR and append them to your video element, they'll be played without gaps.

Currently it's implemented only in Chrome and you need to enable Enable Media Source API on <video> elements in chrome:flags to use it. Also, only WebM container is currently supported.

Here is an article on HTML5Rocks that demonstrates how the API works: "Stream" video using the MediaSource API.

Another useful article that talks about chunked playlist: Segmenting WebM Video and the MediaSource API.

I hope this implementation gets adopted and gets wider media container support.

UPDATE JUN 2014 Browser support is slowly getting better: (thanks @Hugh Guiney for the tip)

Chrome Stable
FF 25+ has a flag media.mediasource.enabled [MDN]
IE 11+ on Windows 8.1 [MSDN]

Support for this is looking up. Stable Chrome now includes it by default, FF can do it with a flag, and even IE 11 has it: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource — Hugh Guiney, Jun 10 '14 at 05:53

score 4 · Answer 2 · answered Jun 10 '12 at 08:17

4

Did you find a better way to do that?

I implemented a double-buffered playback using two video tags. One is used for the current playback, and the second for preloading the next video. When the video ends I "swap" the tags:

function visualSwap() {
    video.volume = video2.volume;
    video2.volume = 0;
    video.style.width = '300px';
    video2.style.width = '0px';
}

It has some non-deterministic behavior, so I am not 100% satisfied, but it's worth trying...

answered Jun 10 '12 at 08:17

whadar

4,181
4
19
21

Use $('#mediaplayer').prop('loop', true); for seamless and for one clip. but if its more then one video clip switching then Google Chrome has no native solution yet. – Apr 22 '15 at 08:30

Enverex · Answer 3 · 2012-05-05T18:07:38.320

Changing the SRC tag is fast, but not gapless. I'm trying to find the best method for a media player I'm creating and preloading the next track and switching the src via "ended" leaves a gap of about 10-20ms, which may sound tiny, but it's enough to be noticable, especially with music.

I've just tested using a second audio element which fires off as soon as the first audio element ends via the event 'ended' and that incurred the same tiny gap.

Looks like (without using elaborate hacks) there isn't an simple(ish) way of achieving gapless playback, at least right now.

score 0 · Answer 4 · answered Jul 03 '12 at 19:13

After many attempts, I did end up using something similar to Method 2. I found this site http://switchcam.com and basically copied their approach. I pre-buffered as the video start time approached and then auto-played as the videos starting point hit. I had the current videos playing simultaneously (in a little div - as a UI bonus) and users could toggle between the videos switching the "main screen view". Since all videos were playing at once, you could choose the audio and the gap didn't end up being an issue.

Unfortunately, I never ended up solving my problem exactly and I am not sure my solution has the best performance, but it works okay with a fast connection.

Thanks for everyones help!

score 0 · Answer 5 · answered Mar 20 '12 at 13:45

it is possible. you can check this out: http://evelyn-interactive.searchingforabby.com/ it's all done in html5. they are preloading all videos at the beginning and start them at the same time. didn t had time yet, to check how they re doing it exactly, but maybe it helps if you check their scripts via firebug

Gapless Transition from Video to Video using html5

5 Answers5

Linked