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

【问题标题】：overlay over dynamically inserted video tag in ipad覆盖在 ipad 中动态插入的视频标签
【发布时间】：2011-10-15 21:31:10
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript ipad video html5-video

【解决方案1】：

经过进一步挖掘，我找到了答案。
看起来this stackoverflow 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');
});

希望对您有所帮助。

【讨论】：