Detecting browser compatibility for HTML5 video and audio

Introduction

During the recent redevelopment of the Nomensa Accessible Media Player we decided to add optional HTML5 video support for clients using the JWPlayer. It is currently not possible to generate different types of media players (Flash/html5) through many 3^rd party vendors JavaScript APIs. However, since we work with the JWPlayer locally we should be able to implement an HTML5 media player for browsers that support and can play the most common types of media.

It is worthwhile mentioning that videos on the Nomensa blog make use of the YouTube player. As such, HTML5 video will not be available on the blog until such a time as YouTube make it possible to generate HTML5 video output using their JavaScript API.

Different browsers offer different levels of support for HTML5 audio and video. Where some browsers support one type of media file other browsers will fail to do so. While browser vendors continue to implement HTML5 features support should get better and better. However, the situation at the time of writing dictates that we cannot (and certainly should not) assume that a browser will play HTML5 media. We have to think about older browsers as well right? Thankfully the JavaScript API for HTML5 media elements provides a couple of useful methods for determining if a particular browser is likely to be able to play a given file. However, the method requires us to know the mime type and which codecs are required to play the file before it can be used (please refer to the W3C HTML 5 Video Specification for more information on Mime types and codecs).

Determining the Mime type

In our instance we decided that there were sufficiently few types of media supported by JWPlayer that we could determine the mime type and required codecs based on the extension of the file. Consider the code example below (Not all supported file types shown).

var get_mime = function(filetype){
var mimetype = '';
var media_container = 'video';
switch(filetype){
case 'mp4':
mimetype = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
break;
case 'ogg':
mimetype = 'video/ogg; codecs="theora, vorbis"';
break;
case 'webm':
mimetype = 'video/webm; codecs="vp8, vorbis"';
break;
case 'mp3':
mimetype = 'audio/mpeg';
media_container = 'audio';
break;
}
return {'mimetype':mimetype,'container':media_container};
};

The argument to the function (‘filetype’) should be a string containing the file extension without the leading dot. Based on this we are manually setting the mime type, required codecs and the element type before returning the information wrapped up inside a JavaScript object. With this information we can now determine if the users browser is likely to be able to play the media natively or not.

Detecting Browser Support

Once we have information about a media files mime type and HTML element name we can easily determine if the browser is likely to be able to play the media. Consider the following code snippet.

var supports_media = function(mimetype, container) {
var elem = document.createElement(container);
if(typeof elem.canPlayType == ‘function’){
var playable = elem.canPlayType(mimetype);
if((playable.toLowerCase() == 'maybe')||(playable.toLowerCase() == 'probably')){
return true;
}
}
return false;
};

The two arguments to this function are as follows:

• Mimetype – The mime type and required codecs as a string e.g. ‘video/webm; codecs=”vp8, vorbis”‘
• Container – The HTML element name expressed as a string e.g. ‘audio’ or ‘video’.

With these parameters we are able to construct an HTML5