HTML5 Video Element on iPad doesn't fire onclick?

Question

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.

score 4 · Answer 1 · answered Mar 26 '12 at 17:48

4

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

answered Mar 26 '12 at 17:48

kimpettersen

1,602
2
13
18

This worked for me. I wasn't able to get video.play() to fire on the iPad. Must be an issue with click vs touchstart and the 300 ms delay. Thanks for the answer. – Steve Hansell Jun 27 '12 at 15:27
There are a lot of "issues" with the events in iOS. Most of them requires that a user action is performed before you call any of them. So if you use the built-in controller to start the video, calling play() and so on will work. – kimpettersen Jun 27 '12 at 19:44
I get that, but the 'click' event would not trigger the video to play whereas the 'touchstart' would allow it. – Steve Hansell Jun 28 '12 at 15:31

score 0 · Answer 2 · answered Feb 18 '11 at 23:42

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.

score 0 · Answer 3 · answered Feb 21 '11 at 23:23

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

HTML5 Video Element on iPad doesn't fire onclick?

3 Answers3

Linked