HTML5 Video Not Working in IE9+10

I'm trying to make an image banner using HTML5 video across multiple browsers. I have the video working in Chrome and Firefox across most operating systems, but Internet Explorer does not appear to work above IE9. The page where the banner is located does not exist in the same folder as the video files; the banner exists across many pages.

The problem that I can see is that IE9 and 10 cannot see the Flash fallback option within the Video HTML5 code and it doesn't register. I wanted to create some sort of if-else statement that would force users who are using IE9 or 10 to view the Flash version while redirecting all other browsers to the general HTML5 version. This banner works in versions below and including IE8.

I do not have access to the .htaccess file; I saw this suggested somewhere else in order to manually add the MIME type (even after I specified it within each video source line.) I looked at the console in IE9+10 to see if the MIME type was an issue, and no error came up. Right-clicking the space where the video came up also gave me HTML5 video options, but clicking Play did nothing.

If someone can help me debug the code or figure out a wa y to make it work, that would be great. Thank you! Below is the HTML5 video code that I am using that works across Chrome, Firefox and other browsers.

<video autoplay loop>
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.mp4" type="video/mp4">
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.ogv" type="video/ogg">
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/FlashFulmar Slideshow.webmhd.webm" type="video/webm">
<object width="954" height="224" type="application/x-shockwave-flash" data="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf">
    <param name="movie" value="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf" />
</object>
</video>

Edit: The codec for the mp4 file is h.264 + AAC.

回答1:

IE only supports a limited set of codecs for video sources

IE 9+ supports h264 with mp3/aac, vp8 and vp9 are questionable, all others it does not seem to support.

MDN doc on media browser compatibility

So you will have to provide several video sources to support each browser, but not necessarily a video for each browser as some of the browsers do overlap in their support.

Providing a video with h264 aac/mp3 should play on IE, Safari, and Chrome. While a video with Theora or VP8 should play on Firefox and Opera

回答2:

A quick and dirty solution would be to force IE to emulate an older version of the browser:

  <!-- Mimic Internet Explorer 8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
  <meta http-equiv="X-UA-Compatible" content="IE=8" >

Note that these <meta tags must be put in the header before all other elements (except for the title element and other meta elements).