javascript iPad 上的 HTML5 视频元素不会触发 onclick 或 touchstart 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3803702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video Element on iPad doesn't fire onclick or touchstart events?
提问by ad rees
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?
我正在尝试将一些事件附加到 iPad 网络应用程序中的 HTML5 Video 元素，但它们似乎没有触发？我已经在设备和模拟器中测试了这个并得到了相同的结果。然而，这些事件（至少对于 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>
回答by Quentin
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 上的视频元素将吞下事件。如果您希望元素响应触摸事件，您必须提供自己的控件。
回答by wodenx
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.
根据我过去几周相当痛苦的经历，我可以开始这样一个列表（至少对于 iPad 3.2）。其中一些“特征”可能被记录在案，但相关的句子通常很难找到。
- The
volumeproperty is ignored (you can set it, and it will appear to change, but the actual volume on the device will not be affected). - The
currentTimeproperty is read-only. My workaround for this is to callload(), which at least allows me to reset to the beginning of the clip. - the
onendedevent will not post reliably unless the controls are visible. My workaround for this is to monitor thetimeupdateevent and compare thecurrentTimeto theduration - as you say,
autobufferandautoplayare disabled. - video will not cache locally regardless of the application cache settings.
- many css rules don't seem to function as expected when applied to the
<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.
- 该
volume属性被忽略（你可以设置它，它看起来会改变，但不会影响设备上的实际音量）。 - 该
currentTime属性是只读的。我的解决方法是调用load()，这至少允许我重置到剪辑的开头。 - 该
onended事件将不会发布可靠的，除非控件是可见的。我对此的解决方法是监视timeupdate事件并将其currentTime与duration - 正如你所说，
autobuffer并被autoplay禁用。 - 无论应用程序缓存设置如何，视频都不会在本地缓存。
- 许多 css 规则在应用于
<video>标签时似乎没有按预期运行- 例如。opacity并且z-index两者似乎都无效，这意味着您无法调暗或隐藏视频。您可以设置display:none，但这非常突然。
As I say, this is probably not an exhaustive list, and I'd welcome additions or corrections.
正如我所说，这可能不是一个详尽的清单，我欢迎补充或更正。
(Also, after muchgoogling, I found a list hereof the meagre subset of QT Plugin methods and properties that are supported on Mobile Safari).
（此外，经过多次谷歌搜索，我在这里找到了一个列表，其中列出了Mobile Safari 支持的 QT 插件方法和属性的微薄子集）。
