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

Question

我目前正在开发一个支持ipad的视频播放器。

它更像是jquery插件。它在桌面上运行得很好，我甚至还在ipad上添加了我的自定义控件。

到目前一切尚好。

问题是，我正在动态地创建和插入视频元素，这给ipad带来了一点麻烦。我采用这种方法是因为我发现(经过几个小时后)，如果您试图将($.wrap)视频包装到一个容器中，视频就会崩溃。

插入视频后，它的动作几乎和平常一样(它可以播放并响应事件)，但是它的位置/显示属性混乱了：我不能在上面添加任何覆盖。这是一个问题，因为我希望我的控件能够显示在视频的顶部。

此外，视频本身不响应正常的touchmove touchstart touchend事件。经过一些研究后，发现如果没有打开默认控件，视频就会捕获所有事件(iPad touch events on tag)。

我的第二个问题是，在包含默认控件之后，视频元素似乎仍然忽略了我的事件处理程序。

所以，我的问题是(这两个问题都是在Ipad的情况下)：

• 您曾经面临过这个问题吗?如果您遇到了这个问题，那么您是如何解决的？
• 只执行硬编码的视频元素触发事件？

。

Answer 1

经过进一步的挖掘，我找到了答案。

看起来，this stackoverflow question中未加标记的答案保存了密钥。

因此，正如我拥有一桶感谢的Jaffa The Cake所言：“您可以通过提供视频元素-webkit-transform-样式:保存-3d来修复动态创建的视频的z索引”，唯一的解决办法是使用css3属性css3。

这样，我们就可以在视频的顶部放置一个覆盖，它可以处理所有的事件(比如播放/暂停)。

Answer 2

没有Ipad能够处理Jquery的动态插入视频，在Ipad上视频不响应触摸或移动，默认情况下，您必须单击一个像play按钮这样的链接来触发视频音频，所以您可以使用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');
});

希望这能有所帮助。