从 Firefox 桌面中的 HTML5 <video> 元素中删除“雾屏”/白色覆盖

Question

我有一个包含多个 <video> 元素的网页：

<video controls preload="none" poster="/my-video-poster.jpg">
<source src="/my-video.mp4" type="video/mp4">
</video>

我注意到在 Chrome 和 IE11 甚至在 Firefox Mobile 上，poster 图像以正常亮度显示（在页面）。

由于某些莫名其妙的原因，仅在 Firefox 桌面 中，所有（未播放的）视频元素看起来都显示在一个有雾的窗口后面。

我已经反复搜索，但找不到关于这种（不需要的）视觉效果的解释，或者我可以如何删除它（通过 CSS 或通过其他方法）。

如何去除这个雾窗视觉效果？

来自 Firefox 56 的示例：

Chrome 61 示例：

Answer 1

@Gaby 的答案是明确的答案（没有它，我将无法开发下面的解决方案），但为了完整起见，我想包括我最终的生产环境解决方案。

工作解决方案：

var unplayedVideos = document.getElementsByClassName('unplayed');

function initialiseVideo() {
    var videoItem = this;
    var video = videoItem.getElementsByTagName('video')[0];
    video.play();
    videoItem.classList.remove('unplayed');
    videoItem.removeEventListener('click', initialiseVideo, false);
    setTimeout(function(){video.controls = 'controls';}, 1500);
}

for (let i = 0; i < unplayedVideos.length; i++) {
        unplayedVideos[i].addEventListener('click', initialiseVideo, false);
}

.item-video, video {
position: relative;
width: 266px;
height: auto;
}

.item-video h2 {
height: 24px;
margin: 0;
padding: 0;
line-height: 24px;
font-size: 16px;
font-family: arial, helvetica, sans-serif;
text-align: center;
}

.unplayed::after {
content: '\25b6';
display: block;
position: absolute;
top: calc(50% - 24px + 12px);
left: calc(50% - 36px);
width: 72px;
height: 48px;
font-size: 24px;
line-height: 48px;
text-align: center;
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.6);
border-radius: 15px;
}

.unplayed:hover::after {
background-color: rgba(255, 0, 0, 1);
}

video, .unplayed::after {
cursor: pointer;
}

<div class="item-video unplayed">
<h2>Video Title Here</h2>
<video preload="none" poster="http://lorempicsum.com/rio/640/360/1">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>

Answer 2

这与poster 无关，它带有controls 属性（即使你不使用海报也会看到它）。

删除它的唯一方法是删除controls 属性并实现自定义控件（通过 JS）。

---

解决方法

由于当controls 属性未设置时问题就消失了，您可以不使用它开始，并创建一个按钮来开始播放（就像它通常出现的那样）和播放开始时然后显示控件。

演示

var videos = document.querySelectorAll('.video-wrap');

[...videos].forEach(function(wrap) {
  wrap.addEventListener('click', function wrapHandler() {
    let video = this.querySelector('video');
    video.addEventListener('play', function playHandler() {
      video.controls = true;
      wrap.classList.add('with-controls');
      video.removeEventListener('play', playHandler);
    })
    video.play();
    wrap.removeEventListener('click', wrapHandler);
  })
});

*,
*:before,
*:after {
  box-sizing: border-box;
}

.video-wrap {
  position: relative;
  display: inline-block;
  pointer-events: none;
  border: 1px solid black;
}

.video-wrap:before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  border-radius: 50%;
  font-size: 2em;
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  padding-left: 0.20em;
  color: rgba(0, 0, 0, 0.7);
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px -2px currentColor;
  cursor: pointer;
  pointer-events: all;
}

.video-wrap video {
  max-width: 100%;
  vertical-align: top;
}

.video-wrap.with-controls:before {
  content: none;
}

.video-wrap.with-controls video {
  pointer-events: all;
}

<div class="video-wrap">
  <video preload="none" poster="http://lorempicsum.com/rio/640/360/1">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    </video>
</div>

(https://jsfiddle.net/s1t41xn0/2/)