iPad 上的 HTML5 视频元素不会触发 onclick 或 touchstart 事件？
我正在尝试将一些事件附加到 iPad Web 应用程序内的 HTML5 视频元素，但它们似乎没有触发？我已经在设备和模拟器中对此进行了测试，并得到了相同的结果。然而，这些事件（至少对于 onclick）在桌面 Safari 中运行良好。我也尝试过将视频元素替换为 div 并且事件触发正常？还有其他人遇到过这个问题并有解决办法吗？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test video swipe</title>
</head>
<body>
<video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>
<script>
var theVid = document.getElementById("currentlyPlaying");
theVid.addEventListener('touchstart', function(e){
e.preventDefault();
console.log("touchstart");
}, false);
theVid.addEventListener('click', function(e){
e.preventDefault();
console.log("click");
}, false);
theVid.addEventListener('touchmove', function(e){
console.log("touchmove");
}, false);
theVid.addEventListener('touchend', function(e){
console.log("touchend");
}, false);
theVid.addEventListener('touchcancel', function(e){
console.log("touchcancel");
}, false);
</script>
</body>
</html>
I'm trying to attach some events to an HTML5 Video element inside my iPad web app but they don't seem to be firing? I've tested this both on the device and in the simulator and get the same results. The events however (for the onclick at least) work fine in desktop Safari. I've also tried swapping the video element for a div and the events fire fine? Has anybody else come across this and have an idea for a work around?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test video swipe</title>
</head>
<body>
<video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>
<script>
var theVid = document.getElementById("currentlyPlaying");
theVid.addEventListener('touchstart', function(e){
e.preventDefault();
console.log("touchstart");
}, false);
theVid.addEventListener('click', function(e){
e.preventDefault();
console.log("click");
}, false);
theVid.addEventListener('touchmove', function(e){
console.log("touchmove");
}, false);
theVid.addEventListener('touchend', function(e){
console.log("touchend");
}, false);
theVid.addEventListener('touchcancel', function(e){
console.log("touchcancel");
}, false);
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您使用控件属性，iPad 上的视频元素将吞噬事件。如果您希望元素响应触摸事件，您必须提供自己的控件。
The video element, on the iPad, will swallow events if you use the controls attribute. You have to provide your own controls if you want the element to respond to touch events.
从我自己过去几周相当痛苦的经历来看，我可以开始这样一个列表（至少对于 iPad 3.2）。其中一些“特征”可能被记录下来，但相关的句子通常很难找到。
volume属性被忽略（您可以设置它，它看起来会发生变化，但设备上的实际音量不会受到影响）。currentTime属性是只读的。我的解决方法是调用load()，这至少允许我重置到剪辑的开头。onending事件不会可靠地发布。我的解决方法是监视timeupdate事件并将currentTime与duration进行比较，autobuffer和自动播放被禁用。标记时似乎无法按预期运行 - 例如。opacity和z-index似乎都无效，这意味着您无法调暗或隐藏视频。你可以设置display:none，但这非常唐突。正如我所说，这可能不是一个详尽的列表，我欢迎补充或更正。
（另外，经过大量谷歌搜索后，我在这里找到了Mobile Safari 支持的 QT 插件方法和属性的一小部分）。
From my own rather painful experiences over the last couple of weeks I can begin such a list (at least for iPad 3.2). Some of these "features" may be documented, but the relevant sentence is often difficult to find.
volumeproperty is ignored (you can set it, and it will appear to change, but the actual volume on the device will not be affected).currentTimeproperty is read-only. My workaround for this is to callload(), which at least allows me to reset to the beginning of the clip.onendedevent will not post reliably unless the controls are visible. My workaround for this is to monitor thetimeupdateevent and compare thecurrentTimeto thedurationautobufferandautoplayare disabled.<video>tag - eg.opacityandz-indexboth seem ineffectual, which means you cannot dim or hide a video. You can setdisplay:none, but that is very abrupt.As I say, this is probably not an exhaustive list, and I'd welcome additions or corrections.
(Also, after much googling, I found a list here of the meagre subset of QT Plugin methods and properties that are supported on Mobile Safari).