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

Question

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

但是，我尝试了另一个移动浏览器（小米Web浏览器），并在所有内容上加载了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>

注意：浏览器是录像带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>

但是我说的是"我不确定"，但是测试它并不糟糕