今天工作的时候,遇到一个客户需要修改的问题:DIV下拉菜单被视频挡住。
我想在做网页前台的时候,很多朋友都会遇到这样的问题:
1. Div层被flash挡住。
2. Div层被Select挡住。
3. Div层被视频文件挡住。
前两个问题,有很容易的方法去解决,在这里我就不讲解了。第三个问题,是个很麻烦的事情,接到这个修改后,当时就觉得情况不乐观,会花掉不少的时间。
在网上找了很多资料,最常见的是说用iframe来解决;也许是我的方法不对吧,我在测试的时候用<iframe src="包含视频的静态页"....></iframe>也无法达到效果,Div层依然会被挡住。
怎么解决呢?呵呵,不卖关子了,将代码放在下面,希望能给大家一个参考:
<div style="position: relative; width: *; height: *; overflow:hidden;">
<embed src="视频文件地址" width="*" height="*" WindowlessVideo="1"></embed>
</div>
首先: WindowlessVideo="1",这个很重要,这个参数的具体意思,大家可以在网上找参考资料,这里我不详述了。通过增加这个参数,在IE系列的浏览器下,都可以让Div层正常的显示在视频文件上方了。
其次:style="position: relative; width: *; height: *; overflow:hidden;",为什么要增加这一个呢?其实我也不知道为什么要加这个,当初在IE下测试成功的时候,发现在FF下会再现两个视频画面,一个是动的,而另一个是静止的,而静止的画面会随着下拉菜单的切换而变化(有点类似PrintScreen的感觉)。在FF下可以充分理解WindowlessVideo是什么意思了。所以,我就萌发了用div来包含<embed...></embed>,再给他一个相对定位(绝对定位我没测试),然后保险起见,顺便定义了宽度、高度及溢出(是否必要,没经测试)。
测试:OK,事情就这样解决了。希望对大家的工作有点小小的帮助。