Firefox HLS and MPEG-DASH Support with Bitmovin

As one of the major browsers, Firefox officially released its support for the MSE in version 42, which is now available to the public and can be downloaded at the Firefox website! This is another step towards replacing Flash and adaptive streaming in HTML5. But what is the so called MSE and why is it important in the context of online video streaming?

The MSE in a Nutshell

The MSE is a specification that extends the HTMLMediaElement to allow JavaScript to dynamically construct media streams for audio and video tags. This wasn’t possible before, as these tags only had the possibility to access full files i.e. mp4 files. This approach is also called progressive streaming or progressive download, as the media files are downloaded and played at the same time to enable pseudo streaming. However, this comes with poor seeking support, and no possibility to adapt the video/audio quality to the real bandwidth situation of the user. By constructing media streams in JavaScript as input for the audio and video tag, developers can now dynamically adapt the media stream to the user’s context, and thus improve the streaming experience.

How to make use of the MSE?

The following JavaScript code snippet shows the use of MSE:

var mediaSource = new window.MediaSource();
mediaSource.addEventListener('sourceopen', function() {
  var sourceBuffer =     mediaSource.addSourceBuffer('video/mp4;codecs="avc1.42c00d"');
  sourceBuffer.appendBuffer(initSegment);
  sourceBuffer.appendBuffer(mediaSegment);
});
videoElement.src = URL.createObjectURL(mediaSource);

Once this MediaSource is initialised, a SourceBuffer for the media data is created, which can be fed with the downloaded segments. Here it is important that we have to tell the SourceBuffer what type of media it will get, e.g. audio or video, which codec or which container format. Furthermore, the audio or video decoder needs to be fed with initialization information which is provided with a so called initialization segment. This special segment may also be present for the different resolutions and quality versions of an audio or video stream, as codecs like h.264 need that information to properly decode.
Content generation is also straight forward and supported by open source tools such as x264 and MP4Box, as well as commercial encoding services such as the Bitmovin Cloud Encoding Service.

Does my Browser Support the MSE?

After a couple of years of slow adoption of the HTML5 and in particular the HTML5 MSE by browsers, we now see the majority of them supporting it. To check if your browser is equipped with the MSE, have a look at this useful resource. MSE support.