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.

Answer 1

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]