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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With