Back to blog homepage

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.

To get an overview of the today’s status of HTML5 MSE and EME support across browsers and platforms, please have a look at the related section on our website.

Conclusion

The HTML5 MSE support in major browsers is a big step towards an ecosystem consisting of open standards for video on the web, and replacing plugins such as Silverlight. However, to reach 99% of the users, we have to have a video streaming setup which supports also older browser versions. Those older browsers can be served easily using a Flash-based player which can play back the same MPEG-DASH content, which is also used by the HTML5 MSE.
Unified video solutions across different platforms and devices will increase the customer experience by the usage of adaptive streaming formats, prevent buffering, decrease loading times and provide the best possible quality for each user’s individual bandwidth and device situation.
Thanks and best,
the Bitmovin Team
Follow us on Twitter: @bitmovin

Spread the word!

Author

CEO and Co-Founder of Bitmovin, a company providing cloud-based OTT video software solutions for leading media companies worldwide.

Ready for the future of video streaming?

Contact us to see how we can optimize efficiency, decreasing time-to-market for your video needs