6

我有<div>元素显示弹出消息。我已经设置z-index:1000并添加<iframe>了，但 div 元素仍然没有显示在 Safari 浏览器中的实时流视频（嵌入插件）上方。我使用了 Chrome 和 Firefox，两者都可以，但在 Safari Windows 中不起作用。

这是我在小提琴中的代码。

<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>

    <object>
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
    </object>
</div>  

<div id="draggable">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>


任何人都可以找到此代码的任何问题吗？

4

4 回答 4

5

您需要将 wmode 更改/设置为不透明。

<embed src="..." wmode="opaque"></embed>

并尝试为第一个对象设置适当的类型。

<embed src="xxxx.avi" ...wmode="opaque" type="application/x-shockwave-flash"></embed>

http://jsfiddle.net/8C2py/7

于 2013-02-25T06:41:21.087 回答
1

据我所知，flash 位于所有 HTML 元素之上。

当弹出窗口存在时，您可以尝试隐藏它。不幸的是，我还没有看到解决方法。

一种好方法是使用与视频大小相同的占位符图像并切换它们

<div class="video">
    <!-- video here -->
</div>
<div class="placeholder" style="display:none;">
    <img src="path/to/placeholder.jpg"
</div>

当您打开弹出窗口时

$(".video").css('display','none');
$(".placeholder").css('display','block');
于 2013-03-10T20:10:54.763 回答
1

以下是该z-index物业的规格（来源：w3.org）：

每个盒子属于一个堆叠上下文。给定堆叠上下文中的每个定位框都有一个整数堆叠级别，这是它在 z 轴上相对于同一堆叠上下文中其他堆叠级别的位置。

我认为这<div class="drag">与您的 flash 对象不在同一个堆叠上下文中。要确保堆叠上下文正确，请使其<div id="draggable">也是相对的，并为其提供比<div>包含 flash 对象的 z-index 更高的 z-index。

注意：我目前无法测试 Safari，所以请告诉我它是否有效：

<div style="position:relative; z-index:1;">
    ... your flash objects...
</div>  

<div id="draggable" style="position: relative; z-index: 2;">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>
于 2013-03-12T08:11:15.533 回答
0

作品 IE FF Chr & Saf

在 iframe/视频上放置一个 div...

将 div 放置在图像上只需用您的图像替换 iframe ....

技巧部分是针对视频的...您必须在 src url 的末尾添加 ... ?wmode=transparent ... ...

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:220px; height:140px;">
    <iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
    <div id="div0" draggable="true" class="Lyr" ></div>
</div>

或者如果你想使用你的目标代码......

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" >
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" 
        allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="240" height="180"></embed>
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>

和 avi 代码....

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180" >
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" allowscriptaccess="always" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>
于 2013-03-12T18:08:06.303 回答