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

Question

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

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

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

• 你有没有遇到过这个问题，当然如果你这样做了，你是怎么解决这个问题的？
• 只做硬编码的视频元素会触发事件吗？

Answer 1

经过多次挖掘后，我找到了答案 看起来this stackoverflow question中没有标记的答案会保留密钥 所以，正如Jaffa The Cake（我有一堆感谢）sais：“你可以通过提供视频元素-webkit-transform-style：preserve-3d来修复动态创建的视频的z-index”，这是唯一的解决方法是使用css3属性 -webkit-transform-style: preserve-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点击事件：

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

希望有所帮助。