Question

I have the following function to detect if an HTML5 capable browser can play an Mp4 file type.

function checkCompat()
{
var vidTag = document.createElement('video');
var support = vidTag.canPlayType('video/mp4');

if (support == '')
{
    showCompatPopup();
}
}

It works as expected. The problem is that IE8 does not support the canPlayType Method. See at W3Schools.

I want to be able to detect a browser’s HTML5 video tag Mp4 file support in IE8 and other browsers that may not support it and also do not support the canPlayType method.

I agree with the few persons out there that useragent.indexOf() kind of stuff is not reliable enough and is certainly not comprehensive.

I need this fix to be client side scripting because I will also need to do this when running files from a disc.

ADDED LATER:

This function seems to work in IE8 without an error. Thanks Philipp.

var vidTag = document.createElement('video');
if (typeof vidTag.canPlayType == 'undefined') {
alert ("your browser doesn't support HTML5 video - download a better one");
}
else
{
var support = vidTag.canPlayType('video/mp4');
if (support == '')
alert ("HTML5 works on this");
}

Answer 1

Instead of trying to find out which browser the user is using and then using this as a base for guessing what it supports and what it doesn’t support (a guess which can be outdated with every browser update), you should just check directly if the browser knows the functions you need.

var vidTag = document.createElement('video');
if (typeof vidTag.canPlayType == 'undefined') {
    alert ("your browser doesn't support HTML5 video - download a better one");
}