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

Barrister

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!

Carree

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.

Involucel

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%); }
}

Sentience

Thank you for your help. But it didn't solve the problem. The first option didn't worked and with the second I also tried to change the Contraste or the Saturation but I never found the initial color :( – Barrister

:( does you encoder let you force a specific colorspace (eg BT.709)? not sure how well Chrome respects that (looking at the open bugs there are a couple that might be causing this) – Sentience

I don't really know why the colors change... I've got a Mac book pro Retina 13" and the colors aren't good (on safari, firefox and chrome). One of my friend who have the same computer than me, tried on firefox and the color is ok... I don't understand... – Barrister

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.

Tacita