HTML5 Player 错误的视频颜色

Question

我有一个大问题。我用我想要的背景颜色自己制作了一个应用程序演示视频。

现在我想在 HTML5 播放器中播放它。一切正常，但现在，当我在 Chrome、Safari 和 Firefox 上仔细查看我的视频时。我可以看到颜色与我制作的原始视频不完全相同。我不明白。我还尝试将此视频上传到 Youtube 并将框架放在我的网站上。一样的。看起来每个视频都没有显示正确的颜色。

一个例子:

左边是红色背景 (#FF6666) 的原始视频，右边是谷歌浏览器上的视频(红色已经从#FF6666 变成了#F3566A!! ) 在 Safari 上，它是相同的，但颜色是:#FC7474

出了什么问题？有人可以帮助我吗？

谢谢，

安托万

Answer 1

我可以解决此问题的唯一方法是通过 Canvas 播放视频。

在视频元素旁边添加 Canvas 并隐藏视频元素。

我没有通用脚本作为示例，但我使用的是这样的脚本:

;(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));

.... 并在需要时在主脚本中随时调用:

Animation.animateVideo();

请记住，这个例子是一个想法，是从一个特定的解决方案中提取的，为了快速回答，删除了一些东西，但我希望它能帮助你提供一些线索。

问候!