iPad 上的 HTML5 视频元素不会触发 onclick 或 touchstart 事件？
Posted
技术标签:
【中文标题】iPad 上的 HTML5 视频元素不会触发 onclick 或 touchstart 事件？【英文标题】：HTML5 Video Element on iPad doesn't fire onclick or touchstart events? 【发布时间】：2011-04-17 18:01:28 【问题描述】：我正在尝试将一些事件附加到我的 iPad 网络应用程序中的 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>
【问题讨论】：
【参考方案1】：如果您使用 controls 属性，iPad 上的 video 元素将吞噬事件。如果您希望元素响应触摸事件，则必须提供自己的控件。
【讨论】：
太棒了！那行得通！我在移动版 Safari 和桌面版 Safari 上遇到了很多不连贯的情况。其中一些喜欢禁用视频自动播放记录在苹果网站上，但似乎有大量未记录的怪癖或者我敢说错误！您知道列出这些差异的任何资源吗？ 我无法让它工作 :(。你究竟是如何创建视频元素的？我的看起来像 并且在 JS 中我正在做 document.getElementById("vid").addEventListener('click', function(e) e.preventDefault() ;alert("clicked");); 它在桌面 safari 上运行良好，但在 ipad/iphone 上运行良好。请提出一些解决方法。 @bhups — 如果您有问题，请提出 question，不要只评论别人对不同问题的回答。 嗨大卫，我的问题是一样的，但我不清楚删除控件属性是如何解决这个问题的。我尝试做同样的事情但没有成功。我没有问，因为这听起来像是这个问题的重复。 既然去掉了controls属性，显然不是同一个问题。即使是这样，您也可以参考这个问题并解释您的问题有何不同。【参考方案2】：根据我过去几周相当痛苦的经历，我可以开始这样的列表（至少对于 iPad 3.2）。其中一些“特征”可能会记录在案，但相关句子通常很难找到。
volume 属性被忽略（您可以设置它，它看起来会发生变化，但不会影响设备上的实际音量）。
currentTime 属性是只读的。我的解决方法是调用load()，这至少可以让我重置到剪辑的开头。
除非控件可见，否则onended 事件将无法可靠发布。我的解决方法是监视timeupdate 事件并将currentTime 与duration 进行比较
如您所说，autobuffer 和 autoplay 已禁用。
无论应用程序缓存设置如何，视频都不会在本地缓存。
当应用于<video> 标记时，许多css 规则似乎没有按预期运行——例如。 opacity 和 z-index 似乎都无效，这意味着您无法调暗或隐藏视频。可以设置display:none，但是很唐突。
正如我所说，这可能不是一个详尽的列表，我欢迎补充或更正。
（另外，在 大量 谷歌搜索之后，我发现了一个列表 here，其中包含 Mobile Safari 支持的少量 QT 插件方法和属性。
【讨论】：
很好的答案 我也经历了以上所有的事情，需要通过艰苦的方式学习。希望有人会在开始开发之前阅读此内容！ 同样如此，此类设备上的视频可能会非常痛苦。我过去的两周非常糟糕，得出的结论与这个出色的答案几乎相同。以上是关于iPad 上的 HTML5 视频元素不会触发 onclick 或 touchstart 事件？的主要内容，如果未能解决你的问题，请参考以下文章
Javascript onloadedmetadata 事件未在 iOS 设备上触发