html - 从 Firefox Desktop 中的 HTML5 <video> 元素中删除 "foggy screen"/white 覆盖

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 Desktop 中，所有(未播放的)视频元素看起来都像是在有雾的窗口后面显示。

我反复搜索过，但找不到对这种(不需要的)视觉效果的任何解释，也找不到我如何删除它(通过 CSS 或其他方法)的解释。

如何去除这种有雾的 window 视觉效果？

来自 Firefox 56 的示例:

来自 Chrome 61 的示例:

Answer 1

这与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/ )