IE9 not loading HTML5 mp4 video - html

Question

My videos are working properly in almost every other browser except IE9. However, it may just be the configuration of IE9 that is causing this issue since on my other laptop with Windows 8 64-bit and IE10 64-bit, when i switch the browser mode to IE9, it works correctly. Here is the issue:
I am using Windows 7 64-bit, IE9 64-bit and 32-bit. My website has videos inside nested JQuery tabs. A tab is loaded at random. If one of the tabs containing a video is chosen to be initially loaded, the video shows up fine. If not, the video shows up blank, however, I am able to right-click where the video should be, select play, and then the video will play as normal and the controls appear.
Here is a link to the page that is experiencing the issue:
http://northernicefastpitch.com/index.php?page=team&team=1
Go to the Scalzitti tab, then select videos to find where the video should be displayed.
Here is my video code:
<video width="310" height="200" controls="controls">
<source src="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4" type="video/mp4">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="310" height="200">
<param name="src" value="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4">
<param name="type" value="video/mp4">
<param name="controller" value="true">
<param name="autoplay" value="false">
<embed src="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4" type="video/mp4" pluginspage="http://www.apple.com/quicktime/download/" width="310" height="200" controller="true" autoplay="false">
</object>
</video>
I am hosting this website on a linux Centos 6.3 server using NGINX so .htaccess files won't cause any problem. I have looked into the "IE9 HTML5 video visible only after cache clearing" post and it did not help me. I have probably tried about 30 different solutions and nothing has worked for me (which is why I am leaning towards IE9 is configured improperly on this laptop).
Please let me know if any of you are able to see the videos properly, with controls, on IE9. If it just this laptop that has the problem, I am definitely ok with that.
Thanks in advance.
John

Answer 1

I couldn't find any viable solution for this problem, but I did come up with a workaround. I was using this workaround only for IE, but after coming across a different problem with Chrome, I decided to use this on all browsers.
<div style="display:inline-block; margin-top:-14px; padding:5px;">
<video id="video14" width="310" height="200" style="background:#000000 url('images/play.png') no-repeat;" preload="none" controls>
<source src="videos/video1.mp4" type="video/mp4">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="310" height="200">
<param name="src" value="videos/video1.mp4">
<param name="type" value="video/mp4">
<param name="controller" value="true">
<param name="autoplay" value="false">
<embed src="videos/video1.mp4" type="video/mp4" width="310" height="200" controller="true" autoplay="false"></embed>
</object>
</video>
<script>
document.getElementById('video14').onclick = function () {
document.getElementById('video14').play();
document.getElementById('video14').onclick = '';
document.getElementById('video14').style.background = '';
};
</script>
</div>
Above, I give my video an id and background image of a play button. I then set some javascript to play the video when clicked and also remove the onclick function as well as the background after it is clicked for the first time. I had to set preload="none" due to the issue with Chrome. Also, instead of using a background, you can use the poster attribute. If using the poster attribute, you don't need the additional javascript to remove the background.
Edit: I tried using poster attribute, but it didn't work in IE9, so sticking with the background for now. Also tried using video.js and poster but that also didn't work in IE9. In IE9, preview poster is still being displayed even with preload="none" when the tab with videos is chosen to be the default tab (default tab chosen at random). I am ok with this random occurrence though.