Bootstrap4 与 IE 和 Edge 的兼容性 - 导航下拉列表和视频标签问题答案

【问题标题】：Bootstrap4 compatibility with IE and Edge - Nav dropdown and video tag issuesBootstrap4 与 IE 和 Edge 的兼容性 - 导航下拉列表和视频标签问题
【发布时间】：2020-08-25 23:53:36
【问题描述】：

我创建了我的第一个网站，但遇到了一些我自己无法解决的问题。
该网站是 Bootstrap 4。

https://jsfiddle.net/NUJ88/cn2bdrw1/

1：我的主要问题是与 IE 和 Edge（可能还有 Firefox）的兼容性。在 Chrome 中一切正常。

当我在 IE11 中打开它时，导航下拉菜单无法定位，并且不会在点击时保持打开状态。我该如何解决这个问题？

2：我的第二个问题是全屏html5视频功能，它不会在IE11或Edge上显示。

HTML：

<video autoplay muted loop id="homeVideo">
     <source src="./local-source-mp4-file" type="video/mp4"; codecs="H.264/MPEG-4">
     Your browser does not support HTML5 video.
</video>

CSS：

#homeVideo {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(video-bg.jpg) no-repeat;
  background-size: cover;
}

video {
  display: block;
}

.video-container {
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -100;

【问题讨论】：

Bootstrap 4 与旧的 IE8/9 不兼容。 Bootstrap 4 在 IE10/11、Edge、FF、Chrome 等中运行良好。按钮和表单字段等某些组件的外观仍然存在差异，但这与功能无关。 nav ddropdown 在所有浏览器中都可以正常工作。 html5 视频标签是一个糟糕的组件，它的样式在所有浏览器中看起来都一样。
“html5 视频标签是一个糟糕的组件，它的样式在所有浏览器中看起来都一样”如果是这样，那么我应该如何获取全屏视频，那将在大多数现代浏览器中自动播放、静音和全屏？

标签： html css drop-down-menu bootstrap-4 html5-video

【解决方案1】：

这将完成这项工作。 CSS 具有响应性，因此视频在所有屏幕格式上都保持 16:9 的比例。不可能有全宽和全高，因为视频是 16:9 而许多屏幕不是。

如果您不支持低于 25 版的 Opera，则可以删除 type="video/ogg" 行。所有现代浏览器都支持type="video/mp4"。

请注意，<video> 标记中的 width="320" height="180" 什么都不做。 CSS 设置宽度和响应高度。

<video> 的样式很糟糕。例如，无法更改图标、更改按钮形状等。对于 syling，需要 Javascript 播放器，如 jPlayer http://jplayer.org

尝试自动将视频全屏播放（如视频播放器上的全屏按钮）是不可能的。即使使用 Javascript 'requestFullscreen' 方法，它也会导致错误Video API can only be initiated by a user gesture。换句话说，全屏只能由网站访问者通过例如 html 中的按钮来启动。

<body>
  <div class="videoContainer">
    <video width="320" height="180" autoplay controls muted>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    </video>
  </div>
</body>

使用这个 css 在所有屏幕格式上保持 16:9 的比例

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.videoContainer {
  display: block;
  width: 100%; /* width of video */
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.videoContainer::before {
  display: block;
  content: "";
  padding-top: 56.25%; /* keep 16:9 ratio */
}
.videoContainer video {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

【讨论】：

这并没有为我解决。它在 Edge 中给了我一个小的缩略图视频，而在 IE 中什么也没有。我选择使用 polyfill 来解决这个问题。我知道这不是理想的解决方案，但是，如果我不使用太多-_- 我会使用这个github.com/TricomB2B/object-fit-videos 实现解释（对于像我这样的其他新手）：youtu.be/VpFTj3Q7DVM