HTML5播放器 视频颜色错误

Question

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

现在我想在HTML5播放器中播放它。一切正常，但是现在，当我仔细观看我的视频时，在Chrome、Safari和Firefox上，我发现颜色与我制作的原始视频不完全相同。我无法理解这一点。我还尝试将此视频上传到YouTube，并将帧放在我的网站上。结果相同。看起来每个视频都没有显示它们正确的颜色。

例如：

左侧是原始视频，背景是红色(#FF6666)，右侧是Google Chrome上的视频（红色已经从#FF6666更改为#F3566A!!） 在Safari上也是如此，但颜色为：#FC7474

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

谢谢,

安东尼

- tempSt69

Answer 1

唯一解决此问题的方法是通过画布播放视频。 在视频元素旁边添加一个画布，隐藏视频元素。 我没有通用的示例脚本，但我正在使用类似于以下内容：

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

记住，这个例子是一个想法，并从特定的解决方案中删除了一些东西以便快速回答，但我希望它能给你一些线索。

问候！

- Victor Salvans Montesó

Answer 2

我找到了一个非常有效的解决方案。我在不同电脑上遇到了视频颜色问题。例如，在某台电脑上，黑色的颜色代码是#000000，但在另一台电脑上是#101010的颜色代码。经过一周的头脑风暴，我最终发现将视频的对比度调整到110％可以完全解决这个问题。您需要做的就是将以下CSS代码添加到您的视频中：

-webkit-filter: contrast(110%);

在所有PC上，黑色变为正常的#000000。

- Jack

Answer 3

请参阅 https://code.google.com/p/chromium/issues/detail?id=76524 了解可能导致此问题的原因。您可以通过关闭浏览器的硬件加速（启动命令行 --disable-accelerated-compositing）来测试是否存在该问题。

另一种替代方案是通过 CSS 手动调整亮度，但需要进行一些调整。

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

- Offbeatmammal

---

谢谢你的帮助。但是它没有解决问题。第一个选项没有起作用，第二个选项我也尝试更改对比度或饱和度，但我从未找到初始颜色 :( - tempSt69

你的编码器是否允许您强制指定特定的色彩空间（例如BT.709）？不确定Chrome是否尊重它（查看未解决的错误中可能有一些原因）。 - Offbeatmammal

我真的不知道为什么颜色会改变... 我有一台Mac book pro Retina 13英寸，但是在Safari、Firefox和Chrome上颜色都不好。我的一个朋友也有和我一样的电脑，在Firefox上尝试了一下，颜色还可以... 我不明白... - tempSt69

Answer 4

您可以下载这个Chrome插件，使用Flash播放器而不是HTML5来播放YouTube上的视频：https://chrome.google.com/webstore/detail/flash%C2%AE-player-for-youtube/lajdkhdcndkniopfefocbgbkofflagpm?hl=vi

祝您玩得愉快。

- supporter