Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    Identify the Browser if its IE or Chrome or FF or something else,

    Hi,

    I need to write a program to embed video (MP4/MOV/FLV/................) into HTML.

    But I have certain issues like, Apple devices does not display FLV/SWF type videos and things like that.

    Therefore I am trying to output (document.write.......) the video depends on the browser type that the user is browsing to view the website.

    I did a search on Google and I came across a couple of sites explaining how to get the browser type in JavaScript. Some of them are :

    Syrius Watch: How can I detect client's browser type with JavaScript?

    JavaScript Window Navigator

    Using the navigator object to detect client's browser



    But when I tested these codes,

    when I browse it in IE/Chrome, window.navigator.appName shows "Netscape"

    when I browse it in IE/Chrome, window.navigator.userAgent shows "Mozilla/5.0....................."


    This is my HTML and JS code :

    HTML :
    Code:
    <button type="button" onclick="CallMe()">Click Me!</button>
    JS :

    Code:
            <script>
            
            function CallMe() {
                alert (window.navigator.userAgent);
            }
            
            </script>

    Can anyone please give me a proper JS to identify the browser type/name/version the user is using to browse the webpage.......

    Thanks,



    Isaac.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,399
    Thanks
    11
    Thanked 595 Times in 575 Posts
    use object detection and graceful degradation instead of browsers sniffing. there's plenty of advice on coding x-browser video embeds, do a quick google for examples...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    document.write is long dead.


    All browsers running on a computer will run flv/swf video - provided the plugin is installed - when attached using an object tag. To add native video support for browsers that support one of the three native formats you wrap a video tag around the object tag.

    The resultant HTML will look something like the following with no JavaScript required.

    Code:
    <video  width="300" height="200" poster="movie.jpg" controls>
            <source src='movie.mp4'
    type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
            <source src='movie.webm'
    type='video/webm; codecs="vp8.0, vorbis"'>
            <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
            <object data="flashmovie.swf" width="300" height="200" type="application/x-shockwave-flash">
                  <param name="src" value="flashmovie.swf">
                  <param name="quality" value="high">
                  <param name="bgcolor" value="#FFFFFF">
                  <param name="wmode" value="transparent">
                  <param name="pluginurl"
    value="http://www.macromedia.com/go/getflashplayer">
    <p>Fallback content for browsers that don't support either video or flash goes here.</p>
            </object> 
    </video>
    It isn't possible to identify any particular modern browser. The most recent browser that can be positively identified is Internet Explorer 8 as that was the last browser that allowed conditional statements to check the browser version.

    All browsers can spooof that they are other browsers by placing appropriate content in the useragent field - for example all spoof that they are Netscape by adding the word "Mozilla" in the useragent as that was what Netscape 1 used to identify itself. People can set the useragent in their browser to anything. For example IE, Firefox and Chrome can all be set to use the following useragent which identifies it as ten different browsers at the same time:

    Code:
    Mozilla AppleWebKit KHTML Safari  Chrome Firefox MSIE 99.0 Trident Opera Android
    Last edited by felgall; 02-28-2014 at 08:52 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,399
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by felgall View Post
    It isn't possible to identify any particular modern browser. The most recent browser that can be positively identified is Internet Explorer 8 as that was the last browser that allowed conditional statements to check the browser version.

    All browsers can spooof that they are other browsers by placing appropriate content in the useragent field - for example all spoof that they are Netscape by adding the word "Mozilla" in the useragent as that was what Netscape 1 used to identify itself. People can set the useragent in their browser to anything. For example IE, Firefox and Chrome can all be set to use the following useragent which identifies it as ten different browsers at the same time:
    actually, by looking at the info available to JS, you can not only identify browsers, but you can identify individual users about 60% of the time, especially on desktop machines, where you have fonts, plugin versions, etc to create a machine fingerprint. You can detect any recent browser simply using modernizr profiles. IE9 and 10 each have properties no other browser does, and IE, FireFox, and WebKit's Error() objects all look different...

    more importantly, you can just look at the useragent string, it works in 99.99% of cases where people didn't screw up their browsers, and you can easily correlate a 2nd smoking gun with a whitelist of useragents for those who do misconfigure their browser.

    to say that "It isn't possible to identify any particular modern browser" is just patently misleading and a disservice to readers, and you're argument that sometimes it's screwed up doesn't mean it's never possible. you are the only person i've heard of changing a userAgent string for non-debug purposes, don't contend that it's the hip new thing that all the kids are doing; it's not.

    all that aside, i still think that object detection (capability detection) is a far better approach for the OP's task.
    browser sniffing is mostly good for detecting bugs, applying polyfills, and collecting demographic information.
    Last edited by rnd me; 02-28-2014 at 09:22 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by rnd me View Post
    all that aside, i still think that object detection (capability detection) is a far better approach for the OP's task.
    browser sniffing is mostly good for detecting bugs, applying polyfills, and collecting demographic information.
    object detection is best for applying polyfills (I have never come across a polyfill code that used anything else).

    browser sniffing is best reserved for collecting demographic information

    running the page in different browsers is best for detecting bugs.

    All browsers spoof that they are Netscape in their useragent. If people didn't misuse browser sensing where they ought to be using object detection then useragent spoofing would have been unnecessary and that field might actually have been able to contain a value that correctly identifies the browser.

    Anyway modernizer and similar use object detection and not browser sensing. Once you include all the different versions of the thousands of different browsers there are probably close to 100,000 different browser versions out there - many of which will share exactly the same support as far as object detection is concerned making it impossible to distinguish between say IE10 and some other browser that happens to support exactly the same objects and spoofs the same useragent.

    Also browsers running in privacy mode will deliberately not provide access to all the information that would allow you to track an individual.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,537
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Its always important to remember Javascript is client side, and thus means its only as honest as the client is. Its easy to bypass/ignore/spoof because its the user's computer. You have no final control over it.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,399
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by felgall View Post
    object detection is best for applying polyfills (I have never come across a polyfill code that used anything else).
    object detection only gets you so far. when browsers implement a non-standard or buggy interface, mere object detection can break. a good example is people using if(document.all) to detect IE, which would trigger true in opera. Or if( attachEvent), which also triggers in Opera, since it likes pretending to be IE. Or consider trying to use if(window.XMLHttpRequest) to hit file://s in IE7. or working around these bugs like document.createElement("<input name=wtf>"), you need to find a smoking gun that's not the feature itself to know when to do that crazy stuff. It's better now that IE is on-board with non-rip-off objects, but often we've had to sniff side-effect smoking guns like ("\v"=="v") or if (window.XML), which is really browser sniffing more than feature detection...

    about modernizr: it's a feature detector, of course it uses feature detection; that's it job. I never said it sniffed. i said that you can use its footprint (the html class typically) to figure out which browser your're really in, without looking at userAgent strings....
    Last edited by rnd me; 02-28-2014 at 11:27 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Keleth View Post
    Its always important to remember Javascript is client side, and thus means its only as honest as the client is. Its easy to bypass/ignore/spoof because its the user's computer. You have no final control over it.
    It isn't possible to spoof that your browser supports a given command though unless you add the polyfill yourself as a userscript. So using object detection is always safe. If they have JavaScript enabled then if the browser doesn't support a given command natively then either they can add it or you can add it and the end result is the same.

    It is only with browser detection where the user can identify IE as Firefox, Firefox as Chrome, Chrome as Opera and Opera as IE.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •