HTML5 视频色差 Chrome 和 Internet Explorer

Question

我使用 HTML5 video 标签在我的网站上播放一段短视频，代码如下:

<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 .

Answer 1

How is this possible?

关于视频

不要期望浏览器的行为 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.