How to replace an element on a page depending on browser?

Question

I have created a website for an online game league that I play in. The problem with it is that in the header there is a HTML5 video that should autoplay. It does this fine in Chrome and Firefox. In internet Explorer it plays but doesn't display correctly and in Safari it doesn't display at all. To solve this, is there any way that I can get the video to replace with a standard image on these browsers? Or does anyone have a fix for these two browsers? Thanks.

http://modernizr.com/ This can help you detecting the browser and solving many issues. Anyway, the HTML 5 video element should be supported from IE 9+ and safari.. Is the autoplay the problem or..? if so, you may solve it using javascript only. — briosheje, Oct 07 '14 at 16:24
modernizr is for feature detection ...not browser detection. — Paulie_D, Oct 07 '14 at 16:26
@Paulie_D: He needs to detect if the browser supports HTML 5 first, doesn't he? — briosheje, Oct 07 '14 at 16:29
@briosheje if it's of any help here is the address I'm having issues with, www.testingfortagpro.meximas.com — Tom, Oct 07 '14 at 16:49
HTML5 is not a 'feature' and won't be detected by Modernizr. — Paulie_D, Oct 07 '14 at 16:55

score 1 · Answer 1 · edited May 23 '17 at 10:33

You have a few options, but keep in mind none are bullet proof, and your implementation will depend on the type of code you are writing (server side like PHP, or client side like JS).

Here are a few recommendations to hopefully get you down the right path.

You can try and detect the browser server side, using the User Agent string. You can parse the string by hand or (in my recommendation) use a built in function/library. Please refer to this thread for more information:

Code to parse user agent string?

Then you would modify your HTML output to either include or not include elements using a set of server side if statements.

You can detect the browser client side, after your HTML is rendered, using JS. Here are a few libraries that do the job. You may need jQuery for some of them.

https://github.com/WhichBrowser/WhichBrowser

https://github.com/gabceb/jquery-browser-plugin

Then you can modify your HTML using something like the .show()/.hider() or .remove() jQuery functions.

I'm not sure how to do this, if it helps the link I'm having problems with is www.testingfortagpro.meximas.com . If I can just get a command to say, if using internet explorer or safari replace the video with logo.jpg for instance, that would do it. — Tom, Oct 07 '14 at 16:59
If you do a bit of reading on the links I provided you will be able to figure out how to do exactly what you want. — Alex, Oct 07 '14 at 18:05

score 0 · Answer 2 · edited May 23 '17 at 12:18

You can use the following JavaScript code to find out the browser name and version:

navigator.sayswho= (function(){
var ua= navigator.userAgent, tem, 
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
    tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
    return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
    tem= ua.match(/\bOPR\/(\d+)/)
    if(tem!= null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();

What you would want to do next is test this string against a value (like "IE 9") and output code based on an if clause.

Also refer to Browser detection in JavaScript?

How to replace an element on a page depending on browser?

2 Answers2