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 b

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

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.

Answer 3

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 4

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