Using MediaSource extensions to play a video playlist

Question

I am trying to achieve a reliable, gapless video playlist in HTML5/JS. To do this, I want to buffer a dynamic playlist in memory and then send the buffer to an HTML5 video element.

I have a choice in how the videos are encoded, and this only has to work on the Chrome browser, so I'm thinking of using webm videos and MediaSource extensions. The video files will be stored on Amazon S3 and delivered with CloudFront.

I've seen the following example of the MediaSource API. The key difference is that instead of reading chunks of a file, I'm reading in lots of files. http://bluishcoder.co.nz/2013/08/20/progress-towards-media-source-extensions-in-firefox.html

How can this be adapted to work with multiple files rather than chunks of a file?

Answer 1

We ended up writing this Javascript library to handle video playback: https://github.com/jameshadley/LifemirrorPlayer/blob/master/LifemirrorPlayer.js

It doesn't use the MediaSourceAPI but it works surprisingly well.