如何使用新的 HTML5 <video> 在 Firefox 中移除视频顶部的灰色覆盖层？答案

【问题标题】：How to remove the gray overlay on top of the Video in firefox using the new HTML5 <video>?如何使用新的 HTML5 <video> 在 Firefox 中移除视频顶部的灰色覆盖层？
【发布时间】：2014-10-04 07:15:21
【问题描述】：

在 Windows 7 上的 Firefox 31 中查看我的网页时，video 标签会显示视频第一帧的图片，并带有深色/灰色叠加层。视频工作没有问题。我希望它显示时没有这种灰色/深色（播放视频后颜色会消失）。

在 Chrome 36 或 IE 上查看同一页面时，图像是白色的，上面没有灰色。这是同一页面的屏幕截图来说明

HTML代码使用的是

 <video width="300" height="240" controls>
     <source src="movie.webm" type="video/webm"> <!-bright on chrome,dark on FF-->
    <source src="movie.ogg" type="video/ogg">
     <source src="movie.mp4" type="video/mp4"> 
   Your browser does not support the video tag.
  </video>

有没有办法，使用 css 或其他方式，使外观与上面的 Chrome 相同。最好在点击播放前能更清楚的看到截图，有深灰色的阴影不好看。

这一切都在 Windows 7 64 位上。

【问题讨论】：

标签： html html5-video

【解决方案1】：

我不认为这有什么关系。但是您可以显示此图像的一些缩略图，点击它时，将缩略图替换为真实视频并自动播放。

【讨论】：

你自己试过了吗？使用poster="image" 对从图像顶部移除灰色完全没有影响。它所做的只是改变灰色阴影下方的图像。但是欢迎您尝试并告诉我它实际上是如何去除顶部的灰色阴影的。这就是我尝试过的<video width="320" height="auto" controls poster="myImage.png"> 除非有不同的方法可以做到这一点。但是你没有说怎么做。
@Nasser 我的意思是这样的jsfiddle.net/Justinas_Jurciukonis/rzyejnoa/1，点击后让它自动启动
感谢您提供的示例，但这并不能解决问题。首先，灰盒还在，但现在是空的。所以不妨使用POSTER="image" 选项，简单得多，并在灰色框下方显示图像。比有一个空的灰色盒子要好得多。问题是灰色框，您的解决方案没有删除。我正在寻找一种解决方案，以在开始播放视频之前删除 Firefox 显示的灰色框。可能没有解决方案，这很好。我接受。但是您的解决方案不会删除灰色框。对不起。再次感谢您的尝试。
@Nasser 你解决过这个问题吗？我遇到了同样的问题，互联网上几乎没有什么可说的。
@skybondsor 我现在在最新的 Firefox 上看不到这个。你可以在这里查看一个示例here 并查看 HTML 课程，看看它是否有帮助。上面链接的主页是here 可能会有所帮助。