如何在 iPad 上的 Quicktime 视频上获取 javascript 点击事件？答案

【问题标题】：How to get javascript click event on Quicktime video on iPad?如何在 iPad 上的 Quicktime 视频上获取 javascript 点击事件？
【发布时间】：2013-06-21 06:15:35
【问题描述】：

我正在使用 Apache Cordova (phonegap) 创建应用，但遇到了问题。

在我的应用中，我有自动播放的音频，当有人点击通过 jQuery 动态插入到页面中的视频元素时，我需要停止它。

要查看我遇到的问题，请在 iPad 中访问此页面，然后查看未触发任何附加事件。 http://jsfiddle.net/PQqMC/4/

该示例具有通过 jQuery 的“.on()”方法和“.bind()”方法以及内联事件附加的事件。它还尝试附加到点击和触摸事件。

这在 iPad 上的 Safari 和 Chrome 中都会发生。有时在未动态插入的视频上似乎也会采取这种方式。

有什么方法可以捕获点击/触摸事件？

这是来自 jsFiddle 页面的代码：

$('#video_cont video').on( 'click', function(){
    alert("clicked (binded before)");   
});
$('#video_cont video').on( 'touchstart', function(){
    alert("touched (binded before)");   
});
$('#video_cont2 video').on( 'click', function(){
    alert("clicked2 (binded before)");   
});
$('#video_cont2 video').on( 'touchstart', function(){
    alert("touched2 (binded before)");   
});

$(document).ready(function(){
$('#video_cont').html( '<video ontouchstart="alert(\'ontouchstart\')" onclick="alert(\'onclick\')" src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>' );

    $('#video_cont video').bind( "click", function(){
        alert("clicked (binded after)");   
});    
    $('#video_cont video').bind( "touchstart", function(){
        alert("touched (binded after)");   
    });
    $('#video_cont2 video').bind( "click", function(){
        alert("clicked2 (binded after)");   
    });    
    $('#video_cont2 video').bind( "touchstart", function(){
        alert("touched2 (binded after)");   
    });
});

【问题讨论】：

您可能遇到了 iOS 政策的问题，即在没有直接用户交互的情况下不允许音频或视频元素执行任何操作，但由于您绑定到 click 事件（和其他人）。

标签： html ipad cordova html5-video quicktime

【解决方案1】：

作为替代方案，我设法连接到“播放”事件以跟踪有人点击并开始播放视频。对于我的特定用例，这已经足够了。

【讨论】：