覆盖在 ipad 中动态插入的视频标签上

Question

我目前正在开发一个支持 ipad 的视频播放器。
它更像是一个 jquery 插件。它在桌面上运行得很好，我什至设法在 ipad 上添加我的自定义控件。
到目前为止一切顺利。
问题是我正在动态创建和插入视频元素，这实际上使 ipad 有点混乱。我之所以采用这种方法，是因为我发现（几个小时后）如果您尝试将视频包装 ($.wrap) 到容器中，视频将会崩溃。
插入视频后，它的行为几乎和正常一样（它可以播放并响应事件），但它的位置/显示属性很混乱：我无法在其上添加任何叠加层。是一个问题，因为我希望我的控件能够显示在视频顶部。

而且，视频本身并不响应正常的touchmove touchstart touchend事件。经过一些研究，事实证明，如果您没有打开默认控件，视频会捕获所有事件（）。
我的第二个问题是，在包含默认控件后，视频元素似乎仍然忽略我的事件处理程序。

所以，我的问题是（仅在 iPad 情况下）：

• 您是否遇到过这个问题，当然如果您遇到过，您是如何解决的？
• 只有硬编码的视频元素才会触发事件吗？

Answer 1

经过更多挖掘后，我找到了答案。
看起来像 中未标记的答案这个 stackoverflow 问题 是关键。
因此，正如 Jaffa The Cake（我非常感谢他）所说：“你可以修复 z -index 通过给视频元素 -webkit-transform-style:preserve-3d" 动态创建的视频，唯一的解决方法是使用 css3 属性 -webkit-transform-style:保留-3d。
这样，人们可以在视频顶部放置一个覆盖层，它可以处理所有事件（例如播放/暂停）。

Answer 2

没有 Ipad 可以处理 Jquery 动态插入的视频，在 Ipad 上视频不会响应触摸或移动，因为默认情况下您必须单击播放按钮之类的链接来触发视频音频，因此您可以使用 Jquery 执行此操作，如下所示

视频

var vid = $('video').get(0);

$('#someselector').click(function() {
 vid.play();

 });
$('#someselector').click(function() {
 vid.stop();

 });

音频

var aud = $('audio').get(0);

$('#someselector').click(function() {
 aud.play();

 });
$('#someselector').click(function() {
 aud.stop();

 });

希望这有帮助。

Answer 3

我的解决方案是使用 jQuery 删除所有像这样的视频的控件

$('video').each(function() {
    $(this).removeAttr("controls");
});

然后，覆盖元素也会响应相应的事件。
为了使视频再次工作，我添加了播放/暂停视频的 jquery click 事件：

$('video').click(function() {
    $(this).trigger('play');
});

希望有帮助。