HTML5 video (ipad)的z-索引分层[复制]

时间:2022-08-26 19:00:47

Possible Duplicate:
iPad Safari mobile seems to ignore z-indexing position for html5 video elements

可能的复制:iPad Safari移动似乎忽略了html5视频元素的z索引位置。

I am using the BrightCove smartplayer code to write an HTML5 video tag into the page. This code replaces the object tag with video tag so that it works on the iphone and ipad, whils still working in browser that dont support

我正在使用BrightCove smartplayer代码在页面上写一个HTML5视频标签。这段代码用视频标签替换了对象标签,这样它就可以在iphone和ipad上工作了,而且还在不支持的浏览器中工作。

The problem I am having is with the layering of this dynaically written in tag. It does not seem to obey the z-index order, resulting in the dropdowns I have placed above the video sitting behind the video when someone rolls over the dropdown.

我现在遇到的问题是,在标签上写这个问题。它似乎不遵守z-索引顺序,导致我在视频后面放置的下拉菜单中,当某人滚动到下拉菜单时。

3 个解决方案

#1


8  

After some digging, I found the solution to my problem, which was a very similar one.
When dynamically inserting a video tag (maybe with others as well) into the dom, the z-index property is messed up.
As you can see here, the solution is quite simple : you have to add the css3 property -webkit-transform-style: preserve-3d.
It's not documented as a bug, but this is the only workaround that I could find.
Hope this helps.

经过一番挖掘,我找到了解决问题的方法,这是一个非常相似的问题。当在dom中动态插入一个视频标记(可能还有其他的)时,z-index属性就会被打乱。正如您在这里看到的,解决方案非常简单:您必须添加css3属性——webkit- transformstyle: preserve-3d。它没有被记录为一个bug,但这是我唯一能找到的解决方法。希望这个有帮助。

#2


0  

Not sure if it applies to HTML5 video, but there's a similar issue with Flash video that can be solved by changing the "wmode" attribute.

不确定它是否适用于HTML5视频,但Flash视频也有类似的问题,可以通过改变“wmode”属性来解决。

#3


0  

I ran into this also. The only thing that I could get to work for me was to add

我也碰到了这个。我唯一能做的就是增加。

display:none

to the video tag when showing a div over it that needed to be clicked on.

对于视频标签,当显示一个div时,需要点击。

#1


8  

After some digging, I found the solution to my problem, which was a very similar one.
When dynamically inserting a video tag (maybe with others as well) into the dom, the z-index property is messed up.
As you can see here, the solution is quite simple : you have to add the css3 property -webkit-transform-style: preserve-3d.
It's not documented as a bug, but this is the only workaround that I could find.
Hope this helps.

经过一番挖掘,我找到了解决问题的方法,这是一个非常相似的问题。当在dom中动态插入一个视频标记(可能还有其他的)时,z-index属性就会被打乱。正如您在这里看到的,解决方案非常简单:您必须添加css3属性——webkit- transformstyle: preserve-3d。它没有被记录为一个bug,但这是我唯一能找到的解决方法。希望这个有帮助。

#2


0  

Not sure if it applies to HTML5 video, but there's a similar issue with Flash video that can be solved by changing the "wmode" attribute.

不确定它是否适用于HTML5视频,但Flash视频也有类似的问题,可以通过改变“wmode”属性来解决。

#3


0  

I ran into this also. The only thing that I could get to work for me was to add

我也碰到了这个。我唯一能做的就是增加。

display:none

to the video tag when showing a div over it that needed to be clicked on.

对于视频标签,当显示一个div时,需要点击。