HTML5 视频色差 Chrome & Internet Explorer答案

【问题标题】：HTML5 Video color difference Chrome & Internet ExplorerHTML5 视频色差 Chrome & Internet Explorer
【发布时间】：2015-04-20 15:08:43
【问题描述】：

我正在使用 HTML5 视频标签在我的网站上播放一段带有此代码的短视频：

<video width="100%" poster="/images/video_preview.jpg">
    <source src="/images/movie.mp4" type="video/mp4">
    <source src="/images/movie.webm" type="video/webm">
    Your browser does not support HTML5 video.
</video>

视频已显示，但当我在我的网站上使用 Google Chrome 浏览器时，颜色看起来有点偏紫，而在 Internet Explorer 上，整个视频看起来更暗。正如您在我的代码中看到的那样，我还有一个预览图像，该图像现在是不同的颜色，然后显示在浏览器上，这不是我想要的。我注意到例如 Apple 也使用 <video> 标签，但它们在浏览器之间没有颜色差异。

这怎么可能？我对所有浏览器都使用相同的代码。是不是因为所有浏览器的渲染？

我该如何解决这个问题？谢谢。

增加赏金

是否有人在浏览器中对视频渲染有同样的问题并可以帮助我解决这个问题？仍然没有弄清楚为什么相同的视频文件在 Internet Explorer 中显示较暗，而在 Google Chrome 中显示为紫色。

该页面已在线，因此您可以看到差异here。

【问题讨论】：

我测试了你的视频，效果很好！我看不出有什么问题！您能否提供一些有关 IE 和 Chrome 问题的图片？

标签： html google-chrome internet-explorer video rendering

【解决方案1】：

这怎么可能？

关于视频

不要期望浏览器会出现 100% 完全相同的行为，尤其是颜色和视频。预计不同浏览器（尤其是不同系统）之间的显示不一致。

不同的浏览器可能使用不同的软件实现的 h264 解码器、不同的视频增强插件等。

这不是您的来源或任何您可以强制修复的问题。

预览图片

这是您可能能够解决的问题。 The image is maybe saved in a certain color profile which isn't supported by both browsers or they simply render differently. 保存图像时，最安全的方法是始终选择“为网络和设备保存”，这是一个 sRGB 配置文件。 Check your photoshop or image editor settings if needed.

【讨论】：

我知道我不能指望浏览器有 100% 相同的行为，但我想知道其他人如何设法让它工作。 IE 和 Chrome 的区别真的很大。
你检查过不同的系统吗？因为这个问题可能只在你的电脑上。就像我说的，你的源视频没有问题。也许尝试在两个浏览器上禁用硬件加速，firefox 和 chrome 和 safari 已经为这些设置单独的设置。
是的，我在 iOS 上检查过（运行良好，没问题），OS X 的问题与在 Windows 上相同。
我在视频中遇到了同样的问题。 3 个浏览器（FF Chrome 和 Edge），3 个不同的显示器......到处都有不同的颜色，它们比预期的更亮或更暗。由于我们有彩色背景，因此视频背景与浏览器颜色不同，尽管视频和浏览器使用相同的颜色代码。我们终于将视频扩展到整个浏览器宽度。

【解决方案2】：

不同的浏览器对某些东西会有不同的实现。尤其是 IE。但是，我从未听说过这种情况。如果您有影响视频元素的 CSS 代码或任何 JavaScript 代码，可能会导致此问题。它必须与浏览器呈现图像的方式不同。您可以尝试通过 JavaScript 重新实现海报功能。让它绘制和图像。单击该图像时，将其删除该图像并在其位置绘制视频。

【讨论】：

预览图就好了。视频的颜色/色调在 IE 和 Chrome 中确实不同。这是主要问题，您可以在this website 上亲自查看。
这就是为什么我建议这样做，看看是否有帮助。

【解决方案3】：

如上所述，这与浏览器如何在其视频面板上呈现视频有关——这很难改变。您可以尝试重新编码视频并以这种方式更改颜色，看看是否有任何改变。

【讨论】：

【解决方案4】：

我在使用 Google Chrome 和 youtube 视频时遇到了类似的问题。在 Chrome 中，我的视频带有黄色，而在 Firefox 中，视频很好。通过执行以下操作，我设法消除了 Chrome 中的颜色失真：

在 Chrome 的 url 栏中，输入“chrome://flags”
启用“覆盖软件呈现列表”标志

这显然不会影响其他观众观看您的视频的方式，但至少您可以正确观看...

【讨论】：

【解决方案5】：

我遇到了同样的问题。尝试使用“601”色域渲染 mp4 视频。这应该会有所帮助。

【讨论】：

【解决方案6】：

编辑：Safari = 没有适当的 webM 支持。我听说 Safari 很受欢迎。必须使用巨型 GIF...??‍♀️?‍♀️

多次遇到这个问题，非常烦人，没有合适的解决方案，所以我最终使用透明背景视频！

.webm 视频格式允许透明度?（比 .gif 或 .apng 更小和更高的分辨率）https://web.dev/replace-gifs-with-videos/

如果你有一个透明的 .mov，你可以使用 ffmpeg 将其转换为 .webm（Handbrake 似乎删除了 alpha 通道）

类似这样的：

ffmpeg -i video-in.mov -c:v libvpx -pix_fmt yuva420p -auto-alt-ref 0 video-out.webm

^ webm 视频当前未在 Safari 中播放，“Safari 仅支持用于 WebRTC 的 VP8。” https://caniuse.com/webm, https://webkit.org/blog/8672/on-the-road-to-webrtc-1-0-including-vp8/。不知道这在实践中意味着什么，感谢 cmets 的任何帮助?

ffmpeg 命令源：https://superuser.com/a/624564/787069

【讨论】：