HTML5视频的z-index分层（ipad） [英] z-index layering for HTML5 video (ipad)

问题描述

可能重复：

iPad Safari mobile似乎忽略了html5视频元素的z-indexing位置

我使用BrightCove智能手机代码将HTML5视频标签写入页面。这段代码用视频标签替换了对象标签，以便它可以在iphone和ipad上运行，仍然可以在不支持的浏览器中工作

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

我遇到的问题是这个动态写入标签的分层。它似乎没有服从z-index顺序，导致当有人翻阅下拉列表时，我放在视频后面的视频下方。

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.

推荐答案

经过一番挖掘，我找到了问题的解决方案，这是一个非常类似的问题。

动态插入视频标签（也许还有其他人）到dom ，z-index属性搞砸了。

如你所见这里，解决方案很简单：你必须添加css3属性 -webkit-transform-style：preserve-3d 。

它没有记录为错误，但这是我能找到的唯一解决方法。

希望这会有所帮助。

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.

这篇关于HTML5视频的z-index分层（ipad）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！