1

我用这个把头发拉出来。我有一个包含 mp4、ogg 和嵌入式 mp4 后备的 HTML5 视频元素。在嵌入后备（IE8）上，我遇到的任何事情都不允许我使用 z-indexing 在其上方构造固定定位元素（#fixed）。我错过了什么吗？或者甚至有可能吗？

我的标记：

<div id="fixed"></div>

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
  <param name="wmode" value="opaque" />
  <embed src="http://www.w3schools.com/html/movie.mp4" wmode="opaque">
      <param name="wmode" value="opaque" />
  </embed>
  Your browser does not support the video tag.
</video>

我的CSS：

body {
    min-height: 300px;
}
#fixed {
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    background: #f0f;
    z-index: 2;
}
video {
    position: relative;
    z-index: 1;
}
embed {
    position: relative;
    z-index: 1;
}

我尝试了几种不同的方式将 wmode 设置为不透明，在每个元素上都使用了 z-indexing，但仍然没有运气。我敢肯定我不是第一个遇到这个问题的人，我敢肯定我也不会是最后一个。

JSfiddle：http: //jsfiddle.net/x4MAh/

用于在 IE8 中查看的 JSfiddle：http: //jsfiddle.net/x4MAh/embedded/result/

干杯! 乍得

4

1 回答 1

0

我用以下内容更新了你的小提琴：

  • 使用绝对定位，而不是固定定位。如果用户滚动，您的叠加层将保留在屏幕上（如果它是固定的）。
  • 使用 css 将您的叠加层调整为视频的大小并使其高度：自动，然后
  • 使用 fitvidsjs.com 动态调整视频大小
于 2015-01-02T06:09:25.547 回答