Is there a way to truly detect Internet Explorer wether it's PHP or Javascript

Question

I been playing around with the HTML5 and I seem to be have trouble getting the video to play well across all browsers. IE supports HTML5 video but when the video is playing a green transparent background is covering the video. If you didn't know that play this video on your IE browser. Here is a Imgur screenshot, IE11.

So my way around it is I converted the video to a SWF file and implemented the script below

<?php 
      if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT'])) {?>
      <div id="flashContent">
              <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="flow" align="middle" style="">
                <param name="movie" value="/index.files/Flow_Double_Size_v01.swf" />
                <param name="quality" value="high" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="transparent" />
                <param name="scale" value="noscale" />
                <param name="menu" value="false" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="/index.files/Flow_Double_Size_v01.swf" width="100%" height="100%">
      <param name="movie" value="/index.files/Flow_Double_Size_v01.swf" />
            <param name="quality" value="high" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="wmode" value="transparent" />
            <param name="scale" value="noscale" />
            <param name="menu" value="false" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
          <!--<![endif]-->
            <a href="http://www.adobe.com/go/getflash">
              <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
            </a>
          <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
      </div>
      <?php }else{  ?>
        <div class="video-container">
          <video autoplay="autoplay" loop class="bg-1">
            <source src="/index.files/html5video/Flow_Updates_MP4_Codec_v02.m4v" type="video/mp4">
            <source src="/index.files/html5video/Flow_Updates_MP4_Codec_v02.ogv" type="video/ogg">
            <source src="/index.files/html5video/Flow_Updates_MP4_Codec_v02.webm" type="video/webm">
          </video>
        </div>
      <?php }; ?>

So the issues I'm running into is every now and then the flash player won't be interpreted by IE and it'll just play nothing, one day it's playing the next its not. I would clear the cache and tested this on our clients computer to see if they are running a flash blocker and they are not. When I viewd the source with the developer tools on IE that's when I realized the conditional statement isn't even read.

I got the PHP script from CSS Tricks I also updated the script that I found in the comments with if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT'])) { }

If there's an alternative to this I would appreciate. I have also tried the fallback version for the HTML5 player with the flash embed but IE does not seem to fall back to it. I need IE to specically play the SWF file.

Answer 1

I mentioned this in the comments, but sniffing a particular browser is always going to be painful. I understand IE11 has made some changes to the user agent string as well, so MSIE no longer appears in it (source - http://www.sitepoint.com/internet-explorer-11-review/), which is probably the source of your problem.

A better approach is to detect specific functionality. Modernizr is a really great library for that, and is fairly easy to use. For instance, detecting h264 support might involve something like this:

if (Modernizr.video.h264 === false) {
    // Do stuff
}

Detecting video support seems to be a bit weird - Chrome returns "probably" for the code above, so I would ensure you do some cross-browser testing.

You can also create your own build of Modernizr including just the functionality you need, so it need not be that heavy.

EDIT: If you need to detect it in PHP, then you can search in the user agent string for "Trident". I believe that should work. However, I would always avoid browser sniffing unless absolutely necessary because you never know what future browsers will be like.

Answer 2

I would recommend you not to avoid totally IE, since newest versions can play HTML5 video. I think would be better if you check the compatibility of the user browser if it can play html5 videos.

http://html5test.com/compare/browser/ie-10/ie-11.html

But If you don't want a huge library just to detect the browser, the code below my help you.

Approach A - vendor name:

var ie = (navigator.appName === 'Microsoft Internet Explorer') === true;

Approach B - regexp:

var ie =  (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) === true;

Approach C - conditional code (https://gist.github.com/padolsey/527683):

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;
}());

Hope one of the suggestions may help you. If not, hope you'll find the best way to do so.

Good luck.

Answer 3

Detecting Internet Explorer may not be necessary at all in this case, as the problem appears to be with this particular video file. IE can play most mp4 videos, but it occasionally fails if it doesn't like the way a video is encoded. If you're just experimenting, it is likely that when you use your own video, it will work just fine.

If that is not the case and either you're dead set on using this video file or you have the same problems with your own, I recommend playing with different encoding settings. ffmpeg is usually pretty good, and you can start with a command like this:

ffmpeg -i INPUTFILE -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 "OUTPUTFILE.mp4"

Have a look at the documentation and try a few different bit rates and presets. In the meantime I'll try to give videojs a heads-up that their video isn't working in IE and see if they can fix it.

Now, if you still can't solve the problem, the best way to detect a browser is on the client, since the user agent string can be changed. 99% of the time, you want to do feature detection, but when you're working around a browser-specific bug like this, browser detection is okay.

You can detect Internet Explorer by looking for document.documentMode. It's a value that IE gives you to tell you if it's running in compatibility mode. Other browsers don't have this property, so you can detect IE like this:

var isIE = 'documentMode' in document;