Question

我在HTML中使用视频元素如下：

<div id="container" style="background:black; overflow:hidden;width:320px;height:240px">
<video style="background:black;display:block" id="vdo" height="240px" width="320px" src="http://mydomain/vid.mp4"></video></div>

在javascript中我这样做：

var video=document.getElementById('vdo');
var container=document.getElementById('container');
video.addEventListener('click', function(e) {
  e.preventDefault();
  console.log("clicked");
}, false);
container.addEventListener('click', function(e) {
  e.preventDefault();
  console.log("clicked");
}, false);

在桌面safari / chrome上一切正常。我可以在控制台中看到两个“点击”。但在ipad上什么都没有。首先我尝试使用iOS版本3.2，然后我将其更新到最新版本4.2.1但没有任何成功。
我发现了一个类似的问题HTML5 Video Element on iPad doesn't fire onclick or touchstart events?，它建议不要在视频标签中使用控件而我是不使用它。

Answer 1

这是一个非常晚的答案，但万一有人想知道。如果您将活动更改为“touchstart”，它将有效。

    video.addEventListener('touchstart', function(e) {

这种行为对我来说似乎有点随意，因为点击大部分时间都有效。我没有仔细研究过为什么以及何时

Answer 2

您是否确认目前没有其他点击与该事件发生干扰？我所做的是在添加新的侦听器之前首先解除特定事件的绑定。

即：

video.unbind("click").click(function(){...}

我发现这可以解决我遇到的问题。

Answer 3

我按照Frederico的建议尝试解除绑定/点击，但我仍然没有收到任何点击事件。但是，我确实可以使用touchstart和touchend事件。（我实际上是从DOM中的div级别获取它们，但我希望你也可以从视频元素中获取它们。）

iPad上的HTML5视频元素无法点击？

3 个答案: