Question

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

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

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

有什么办法可以在不太兼容的浏览器上强制播放背景中的视频，或者检测到页面元素不可见并杀死视频或使用背景图像？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

注意：浏览器与vidotag 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>

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

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

1 个答案: