iPad 上的 HTML5 视频元素无法触发 onclick?

发布于 2024-10-11 12:28:23 字数 1189 浏览 6 评论 0 原文

我在 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>
And in javascript I am doing this:
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);
On desktop safari/chrome everything is working fine. I can see two "clicked" in the console. But on ipad there is nothing. First I tried with iOS versin 3.2, then I updated it to the latest one 4.2.1 without any success.
I found a similar question HTML5 Video Element on iPad doesn't fire onclick or touchstart events? where it suggests not to use controls in video tag and I am not using it.

I am using the video element in my HTML as following:

<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>

And in javascript I am doing this:

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);

On desktop safari/chrome everything is working fine. I can see two "clicked" in the console. But on ipad there is nothing. First I tried with iOS versin 3.2, then I updated it to the latest one 4.2.1 without any success.
I found a similar question HTML5 Video Element on iPad doesn't fire onclick or touchstart events? where it suggests not to use controls in video tag and I am not using it.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

GRAY°灰色天空 2024-10-18 12:28:23

这是一个很晚的答案,但以防万一有人想知道。如果您将事件更改为“touchstart”,它将起作用。

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

这种行为对我来说似乎有点随机,因为点击在大多数情况下都有效。我还没有研究确切的原因和时间

This is a very late answer, but in case anyone wonders. If you change your event to "touchstart" it will work.

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

This behavior seems sort of random to me, because click works most of the time. I have not looked into exactly why and when

木緿 2024-10-18 12:28:23

您是否确认当前没有其他点击会干扰该事件?我所做的是在添加新侦听器之前首先取消特定事件的绑定。

即:

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

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

Have you confirmed there are currently no other clicks that are interfearing with that event? What I've done is first unbind on the particular event before adding the new listener.

ie:

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

I found this to fix the issue I was having.

潦草背影 2024-10-18 12:28:23

我尝试按照 Frederico 的建议取消绑定/单击,但仍然没有收到任何单击事件。不过,我确实让 touchstart 和 touchend 事件正常。 (我实际上是从 DOM 中上一级的 div 获取它们,但我希望您也可以从 video 元素中获取它们。)

I tried unbind/click as suggested by Frederico, but I still didn't receive any click events. I do, however, get touchstart and touchend events OK. (I'm actually getting them from a div one level up in the DOM, but I expect you could also get them from the video element just the same.)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文