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>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);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>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);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. Share Improve this question edited May 23, 2017 at 11:55 CommunityBot 11 silver badge asked Jan 11, 2011 at 5:15 bhupsbhups 14.9k8 gold badges52 silver badges57 bronze badges
3 Answers
Reset to default 4This 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
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.
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.)