如何检测 html5 背景视频的不兼容浏览器并改为显示图像？

Question

我设计了一个带有全屏背景 html5 视频的页面，表单元素覆盖在页面正文中。 Chrome 和 Firefox 以及它们的移动设备都可以在后台正确播放视频。

但是，我尝试了另一个移动浏览器（小米网络浏览器），它将 webm 视频加载到所有内容之上，全屏...阻止页面上的所有其他内容并使其无法使用。基本上是最坏的情况。

我想非常清楚，浏览器支持视频标签，因此海报属性或在视频元素中嵌套图像无效。问题不在于视频没有加载，而是它加载在其他所有内容之上，这意味着似乎没有明确的方法来处理这种不兼容的显示问题。希望有一些解决方法可以允许从页面弹出视频元素的浏览器用户仍然使用该站点。

有什么方法可以在不太兼容的浏览器上强制将视频置于背景中，或者检测到页面元素不可见并终止视频或使用背景图像代替？

video#bgvid {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  background: url(images/particles.jpg) no-repeat;
  background-size: cover;
}

<video poster="images/particles.jpg" id="bgvid" playsinline autoplay muted loop>
   <source src="images/particles.webm" type="video/webm">
   <source src="images/particles.mp4" type="video/mp4">
   <img alt="particles" src="images/particles.jpg" width="640" height="360" title="No video playback capabilities" />
</video>

注意：浏览器与 videotag webm 兼容，视频播放。然而，它超越了其他一切。不幸的是，这意味着如果视频无法加载，则使用标准后备代码加载图像没有任何效果。

Answer 1

你好，亲爱的，我不确定，但也许它可以与下面的一些 css 一起使用：

.fullScreen {
  height: 100vh;
  background-color: lightblue;
  color: "red";
}

<div class="fullScreen">
   <video poster="images/particles.jpg" id="bgvid" playsinline autoplay muted loop>
   <source src="images/particles.webm" type="video/webm">
   <source src="images/particles.mp4" type="video/mp4">
   </video>
</div>

但我说“我不确定”，但测试它也不错