I need to load in different movie formats based on browser type. Specifically if the user is using firefox then I need to load in a .ocv video.

I have tried using:

alert(navigator.appName); 

but this always returns 'Netscape' in both chrome and firefox??

Is there a better alternative?

Cheers

I need to load in different movie formats based on browser type. Specifically if the user is using firefox then I need to load in a .ocv video.

I have tried using:

alert(navigator.appName); 

but this always returns 'Netscape' in both chrome and firefox??

Is there a better alternative?

Cheers

• javascript
• html
• browser
• html5-video
• user-agent

• I'm surprised that no one mentioned that all methods of browser detection are flaky at best. Your best bet is to see if the browser can support various video formats, and trying to load those. – Jeffrey Sweeney Commented Oct 10, 2012 at 11:35
• I guess you didn't read my answer ;) – japrescott Commented Oct 10, 2012 at 14:30

5 Answers 5

STOP!!! all proposed solutions are the reason the web is broken&breaking!

Don't assume a browser, based on the name you regexp out of the userAgent, can do something or not just because it sais its an IE, Firefox or Chrome. UserAgents can be and are faked! Do a feature detection either by hand or use something fullfeatured like Modernizr

What you want to do is provided via javascript. To check if the browser can do html5 video playback;

var canHtml5Video=function(){
    return !!document.createElement("video").canPlayType;
}

To check if the Browser can play a certain type (mp4, ogg), use the canPlayType method of the audio/video element.

var elem=document.getElementsByTagName("video")[0];
if (elem.canPlayType("video/mp4")===""){
    //handle firefox and all browser that cant pay the mp4 royality fee
}
else{
    //handle mp4
}

Alternativ, you can just add multiple source elements to the video element. The Browser will chose what fits best.

<video>
    <source src="http://....mp4" type="video/mp4" />
    <source src="http://....ocv" type="video/ogg" />
</video>

Try alert(navigator.userAgent);

For more information: http://www.w3schools./js/js_browser.asp

You want to use some like this

Use navigator.userAgent to get the browser details

if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
    // Inside firefox
}

if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1) {
    // Inside chrome
}

if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
    // Inside IE
}

for ie:

var ie = $.browser.msie;

for firefox:

var mozilla = $.browser.mozilla;

for chrome:

var chrome = $.browser.webkit && window.chrome;

for safari:

var safari = $.browser.webkit && !window.chrome;