Having videos in your intranet/portal is a great way to interact and deliver content to your users. For our video player webpart, we use Video.js – a cross-browser compatible HTML5 video player. A feature of Video.js is its ability to gracefully fallback to Flash (or another video playback technology) whenever HTML5 video is not supported. However, we were running into a problem in Firefox when an MP4/H.264 video file is the only source available.
[html light=”true”]
<video width=”1280″ height=”720″ controls=”controls”>
<source src=”video.mp4″ type=”video/mp4″ />
</video>
[/html]
Whenever Video.js tried to play an MP4 video in Firefox, we were greeted with this error:
Firefox does not natively support MP4 videos (even IE9+ does!), which is why we see this error. In this situation, we would expect Video.js to fallback to Flash playback, but it does not. Video.js simply checks if the browser supports the HTML5 <video> tag. If it does, then it tries to play the video with HTML5. If it does not, then it falls back to Flash. Firefox does support <video> so Video.js plays in HTML5 mode without knowing Firefox is unable to handle MP4 videos.
One solution to this is to add an additional video source in a format that is supported by Firefox, such as webm.
[html light=”true”]
<video width=”1280″ height=”720″ controls>
<source src=”video.mp4″ type=”video/mp4″>
<source src=”video.webm” type=”video/webm”>
</video>
[/html]
This requires converting your videos and hosting multiple versions of them in different formats. Some of our clients have hundreds of videos, so this was not a viable solution. Instead, a workaround is possible using the Video.js API and adding a listener to the ‘error’ event.
[javascript]
videojs(id).ready(function() {
videoPlayer = this;
videoPlayer.on(‘error’, function() { // error event listener
// dispose the old player and its HTML
videoPlayer.dispose();
// re-add the <video> element to the container
jQuery(‘.video-container’).append(‘<video id=”‘ + id + ‘” controls autoplay class=”video-js vjs-default-skin” preload=”auto” data-setup=”{}”>’ +
‘<source src=”video.mp4″ type=”video/mp4″ /></video>’);
// force Flash as the only playback option
videojs(id, {“techOrder”: [“flash”]}).ready(function() {
videoPlayer = this;
});
});
});
[/javascript]
If an error is thrown in the original videojs object, we dispose it and create a new one where Flash is the only playback technology in the techOrder array, forcing it to only use Flash.
Hopefully MP4 video support will be added to Firefox soon. Until then, these are 2 possible solutions to get Video.js, Firefox, and MP4 videos to play nice.
