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

Posted 2023-05-07

【中文标题】覆盖在 ipad 中动态插入的视频标签

【英文标题】：overlay over dynamically inserted video tag in ipad

【发布时间】：2011-10-15 21:31:10

【问题描述】：

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

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

所以，我的问题是（仅在 Ipad 案例中）：

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

【参考方案1】：

经过进一步挖掘，我找到了答案。 看起来this *** question 中未标记的答案是关键。 因此，正如Jaffa The Cake（我非常感谢他）所说：“您可以通过提供视频元素 -webkit-transform-style:preserve-3d 来修复动态创建的视频上的 z-index”，唯一的解决方法是使用 css3 属性 -webkit-transform-style: preserve-3d。 这样，您可以在视频顶部放置一个覆盖层，该覆盖层可以处理所有事件（例如播放/暂停）。

【参考方案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();

 );

希望这会有所帮助。

【讨论】：

谢谢，但我的视频几乎可以正常工作。这只是z-index 的问题。如果我可以在视频上添加一个叠加层，那可以捕获我所有的“触摸”事件并充当播放/暂停触发器。

【参考方案3】：

我的解决方案是使用 jQuery 删除所有此类视频的控件

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

然后，叠加元素也会响应相应的事件。 为了让视频再次正常工作，我添加了播放/暂停视频的 jquery 点击事件：

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

希望对您有所帮助。