覆盖在ipad中动态插入的视频标签 [英] overlay over dynamically inserted video tag in ipad
问题描述
我目前正在开发支持ipad的视频播放器。
它更像是一个jquery插件。它在桌面上工作得很好我甚至设法在ipad上添加我的自定义控件。
到目前为止一直很好。
问题是我正在动态创建和插入视频元素，事实上有点混淆了ipad。我遵循这种方法，因为我发现（经过几个小时），如果你试图将视频（ $。wrap ）包装到一个容器中，视频就会崩溃。
插入视频后，它几乎正常运行（可播放并响应事件），但它的位置/显示属性混乱：我无法添加任何叠加层它。这是一个问题，因为我希望我的控件能够显示在视频的顶部。
I'm currently developing a video player with support for ipad.
It's more of a jquery plugin. It works great on desktop and I even managed to add my custom controls on the ipad.
So far so good.
The problem is that I am creating and inserting dynamically the video element, fact that messes up the ipad a bit. I followed this approach because I found out (after a few long hours) that if you try to wrap ($.wrap) the video into a container, the video will crash.
After inserting the video, it acts almost as normal (it is playable and responds to events), but it's position/display properties are messed up: I can't add any overlay on top of it. This is an issue, because I want my controls to be able to be displayed on top of the video.
此外，视频本身不响应正常的 touchmove touchstart touchend 事件。经过一些研究后发现，如果您没有打开默认控件，视频会捕获所有事件（ iPad触摸事件< video>标记 ）。$
我的第二个问题是，在包含默认控件之后，视频元素似乎仍然忽略了我的事件处理程序。
Moreover, the video itself does not respond to the normal touchmove touchstart touchend events. After some research, it turns out that if you do not have the default controls turned on, the video captures all the events (iPad touch events on <video> tag).
My second problem is that after including the default controls, the video element still seems to ignore my event-handlers.
所以，我的问题是（两者都只在Ipad案例中）：
So, my questions are (both only in Ipad cases):
- 你有没有遇到过这个问题，当然如果你这样做了，你是如何解决它的？
- 只做硬编码的视频元素会触发事件吗？
推荐答案
经过多次挖掘后我找到了答案。
看起来像
所以，作为 Jaffa The Cake （我有一个桶）谢谢）sais：你可以通过提供视频元素-webkit-transform-style：preserve-3d来修复动态创建的视频的z-index，唯一的解决方法是使用css3属性 -webkit-transform-style：preserve-3d 。
这样，可以在上面放置一个叠加层可以处理所有事件的视频（例如播放/暂停）。
After some more digging I've found the answer.
Looks like the unmarked answer in this stackoverflow question holds the key.
So, as Jaffa The Cake (who I ow a bucket of thanks) sais : "You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d", the only workaround is to use the css3 property -webkit-transform-style: preserve-3d.
This way, one can put an overlay on top of the video which can handle all the events (such as play/pause).
这篇关于覆盖在ipad中动态插入的视频标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
