WebM HD Toggle Example

This setup of the HD plugin provides an HD version of a video in both MP4 and WebM format. Since the HD plugin by itself does not support browser format detection, this is done with a few lines in the embed code:

Embed code

<div id="container"></div>

<script type="text/javascript">
var options = {
    file: '/videos/bkaovAYt.mp4',
    height: 315,
    image: '/thumbs/bkaovAYt-720.jpg',
    modes: [
        { type: 'html5' },
        { type: 'flash', src: '/assets/player.swf' },
        { type: 'download' }
    ],
    plugins: {
        'hd-2': {
            file: '/videos/bkaovAYt-hd.mp4'
        }
    },
    width: 560
};
if(!!document.createElement('video').canPlayType('video/webm')) {
    options.file = '/videos/bkaovAYt.webm'
    options.plugins['hd-2'].file = '/videos/bkaovAYt-hd.webm';
}
jwplayer("container").setup(options);
</script>

Note the line of javascript that contains the canPlayType function. It detects if WebM support is available. If so, it overrides the pre-set MP4 files with WebM versions. Only when that detection is done, the player is setup.

Also note the modes block in the player options. It ensures the HTML5 mode is selected first, and Flash is only used if HTML5 mode is not available (e.g. for IE8.).