HTML5 播放器错误的视频颜色答案

【问题标题】：HTML5 Player Wrong video colorsHTML5 播放器错误的视频颜色
【发布时间】：2015-01-19 14:32:32
【问题描述】：

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

现在我想在 HTML5 播放器中播放它。一切正常，但现在，当我在 Chrome、Safari 和 Firefox 上专心观看我的视频时。我可以看到 颜色与我制作的原始视频不完全相同。我无法理解。我还尝试将这段视频上传到 Youtube 并将框架放入我的网站。一样的。似乎每个视频都没有显示正确的颜色。

一个例子：

左边是红色背景的原始视频（#FF6666），右边是谷歌浏览器上的视频（红色已从#FF6666变为#F3566A！！ ) 在 Safari 上，它是一样的，但颜色是这样的：#FC7474

怎么了？有人可以帮我吗？

谢谢，

安东尼

【问题讨论】：

标签： html colors html5-video

【解决方案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();

请记住，此示例是一个想法，取自特定解决方案，删除了一些内容以便快速回答，但我希望它有助于为您提供一些线索。

问候！

【讨论】：

【解决方案2】：

我找到了一个非常有效的解决方案。我在不同的 PC 上遇到了视频颜色的问题。例如，在 PC 的一部分上，我得到黑色 #000000，但在另一部分上，我得到 #101010 颜色。经过 1 周的头脑风暴，我最终发现将视频的对比度更改为 110% 完全解决了这个问题。您应该做的就是将该 CSS 行添加到您的视频中：

-webkit-filter: contrast(110%);

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

【讨论】：

【解决方案3】：

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

另一种可能需要一些调整的hacky解决方案是通过css手动调整亮度，例如

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

【讨论】：

感谢您的帮助。但这并没有解决问题。第一个选项不起作用，第二个选项我也尝试更改对比度或饱和度，但我从未找到初始颜色:(
:(您的编码器是否允许您强制使用特定的色彩空间（例如 BT.709）？不确定 Chrome 对此的尊重程度（查看开放的错误，有几个可能导致此问题）
我真的不知道为什么颜色会改变......我有一个 Mac book pro Retina 13"，颜色不好（在 safari、firefox 和 chrome 上）。其中一个和我同台电脑的朋友，在firefox上试了下，颜色还可以。。。看不懂。。。

【解决方案4】：

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

玩得开心。

【讨论】：