CODEWITHSUNDEEP
javascripteventsmobile-safarihtml5-video
bhups
bhups

Reputation: 14875

HTML5 Video Element on iPad doesn't fire onclick?

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.

Upvotes: 1

Views: 6127

Answers (3)

kimpettersen
kimpettersen

Reputation: 1602

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

Upvotes: 4

AlpineCarver
AlpineCarver

Reputation: 1708

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

Upvotes: 0

Petrogad
Petrogad

Reputation: 4423

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.

Upvotes: 0

Related Questions