Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Video color difference Chrome & Internet Explorer

I'm using the HTML5 video tag to play a short video on my website with this code:

<video width="100%" poster="/images/video_preview.jpg">
    <source src="/images/movie.mp4" type="video/mp4">
    <source src="/images/movie.webm" type="video/webm">
    Your browser does not support HTML5 video.
</video>

The video's are shown but when I'm on my website in Google Chrome the colors look a little bit more purple then they should be and on Internet Explorer the whole video got a darker look. I also have a preview image as you can see in my code and that image is now a different color then shown on the browser and that's not what I want. I noticed that for example Apple also uses the <video> tag but they have no color difference between browsers.

How is this possible? I'm using the same code for all browsers. Is this because of the rendering of all the browsers?

How can I fix this? Thanks.


ADDED BOUNTY

Is there anyone that had the same issue with video rendering in browsers and can help me fix this issue? Still haven't figured out why the same video file is shown darker in Internet Explorer and with a purple glow in Google Chrome.

The page is online so you can see the difference here.

like image 623
Tom Spee Avatar asked Feb 19 '15 10:02

Tom Spee


1 Answers

How is this possible?

About the video

Do not expect 100% the exact same behavior from browsers, especially not colors and video. Display inconsistency is expected between different browsers (and especially different systems).

Different browsers might use different software implementations of h264 decoder, different video enhancement plugins, etc.

This is not a problem with your source or anything you can forcefully fix.

The preview image

This is something you might be able to fix. The image is maybe saved in a certain color profile which isn't supported by both browsers or they simply render differently. When saving an image the safest way is to always select "save for web & devices", which is a sRGB profile. Check your photoshop or image editor settings if needed.

like image 198
Timmetje Avatar answered Sep 22 '22 20:09

Timmetje