IE9 - HTML5 MP4 playback problem: Weird color difference

Question

I have a really weird problem with IE9 and HTML5 Video playback. I have an .mp4 file which is supposed to blend with the background, which works perfectly in Chrome. But with playing in IE9 the video gets a slight darker shade than in the other browsers - a shade which doesn't show up when using my Flash fallback player for IE7 and IE8.

The HTML code is here:

<video id="banner-video-0" width="1280" height="572" autobuffer="true">
  <source src="/Media/Video/video.mp4" type="video/mp4">
  <source src="/Media/Video/video.webm" type="video/webm">
  <source src="/Media/Video/video.ogv" type="video/ogg">
</video>

I think it might be some sort of codec issue.

Answer 1

In my case Safari was the only major browser playing the MP4, to remedy the issue I passed in the JavaScript below that detects Safari and adds a class to the body

if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)
  {
      $('body').addClass('safari');
  }

Then in my CSS file I tweaked the background color to match the video background

body.safari,
.safari video,
.safari .mantle {
  background:#3b3b3b;
}