HTML5 Player Wrong video colors

Question

I've got a big problem. I made an app presentation video by myself with background colors I want.

Now I would like to play it in a HTML5 player. Everythings work but now, when I look attentivly at my video on Chrome, Safari and Firefox. I can see that the colors aren't exactly the same as the original video I've made. I can't understand that. I also tried to upload this video on Youtube and put the frame in my website. It's the same. It looks like every videos don't show their correct colors.

An example :

At the left, the original video with the Red background (#FF6666) and at the right, it's the video on Google Chrome (the red color has changed from #FF6666 to #F3566A !!) On Safari, it's the same but with this color : #FC7474

What's going wrong ? Can someone help me ?

Thanks,

Antoine

Answer 1

The only way I could fix this issue is playing videos through canvas.

Add a canvas next to the video element and hide the video element.

I don't have a general script as example but I'm using something like this:

;(function(window){

var Animation = {

    animateVideo: function () {
        var self = this,
            video = document.getElementById('video'),
            canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            width = canvas.clientWidth,
            height = canvas.clientHeight;

        canvas.width = width;
        canvas.height = height;

        video.addEventListener('play', function() {
            self.draw(this, context, width, height);
        }, false);

        video.play();
    },

    draw: function (video, context, width, height) {
        var self = this;

        if(video.paused || video.ended) return false;
        context.drawImage(video,0,0,width,height);

        setTimeout(function() {
            self.draw(video, context, width, height);
        }, 60);

    }

 }

 window.Animation = Animation;

}(window));

.... and in the main script whenever you need and is ready call:

Animation.animateVideo();

Bear in mind, this example is an idea and is taken from a specific solution with some stuff removed for a quick answer, but I hope it helps to give you some clues.

Regards!

Answer 2

I found a very productive solution. I got an issue with videos colors on different PC. For instance, on one part of PC I got black color as #000000 but on other one I got #101010 color. After 1 week of brainstorm I eventually found that changing contrast of the video to 110% solving that problem totally. All, that you should do is to add that CSS row to your video:

-webkit-filter: contrast(110%);

and black becomes normal #000000 on all PC.

Answer 3

see https://code.google.com/p/chromium/issues/detail?id=76524 for possible cause of the issue. You can test to see if that's the issue by turning off hardware acceleration for your browser (startup command line --disable-accelerated-compositing)

an alternative, hacky, solution that might take some tweaking is to manually adjust brightness via css eg

@media screen and (-webkit-min-device-pixel-ratio:0) {
    video{ -webkit-filter: brightness(110%); }
}

Answer 4

You can download this add-on for Chrome to play videos on youtube with Flash player instead of HTML5: https://chrome.google.com/webstore/detail/flash%C2%AE-player-for-youtube/lajdkhdcndkniopfefocbgbkofflagpm?hl=vi

Have fun.