HTML5视频播放器IE8嵌入后备与固定定位元素 [英] HTML5 Video player IE8 Embed fallback vs fixed positioned element

问题描述

我用这个拉我的头发。我有一个HTML5视频元素包含一个mp4，ogg和嵌入式mp4后备。在嵌入式回退（IE8）上，我没有遇到过的任何问题都允许我使用z-indexing来构造上面的固定定位元素（#fixed）。我缺少什么？

 < div id =fixed>< / div> 
 
< video width =320height =240controls> 
< source src =http://www.w3schools.com/html/movie.mp4type =video / mp4> 
< source src =http://www.w3schools.com/html/movie.oggtype =video / ogg> 
< param name =wmodevalue =opaque/> 
< embed src =http://www.w3schools.com/html/movie.mp4wmode =opaque> 
< param name =wmodevalue =opaque/> 
< / embed> 
您的浏览器不支持视频标签。 
< / 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/

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

干杯！
Chad

解决方案

我更新了以下内容：

• 使用绝对定位，而不是固定定位。


• 如果用户滚动，您的重叠式广告会保留在屏幕上。
• 使用css将重叠式广告尺寸调整为视频大小， b $ b
• 使用fitvidsjs.com动态调整视频大小

I'm pulling my hair out with this one. I have an HTML5 Video element containing an mp4, ogg, and an embedded mp4 fallback. On the embed fallback (IE8), nothing I have come across has allowed me to structure the fixed positioned element (#fixed) above it with z-indexing. Am I missing something? Or is it even possible?

My markup:

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

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

I've tried setting the wmode to opaque a couple of different ways, have played with z-indexing on each element, and still have had no luck. I'm sure I'm not the first to run across this issue, and I'm sure I won't be the last, either.

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

JSfiddle for viewing in IE8: http://jsfiddle.net/x4MAh/embedded/result/

Cheers! Chad

解决方案

I updated your fiddle with the following:

• Use absolute, not fixed, positioning. If user scrolls, your overlay will stay on the screen if it's fixed.
• Size your overlay to the size of the video with css and make it height: auto, then
• use fitvidsjs.com to resize the video dynamically

这篇关于HTML5视频播放器IE8嵌入后备与固定定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！