CODEWITHSUNDEEP
jqueryiphonehtmlvideo
Andrew Howard
Andrew Howard

Reputation: 3072

Detect touch on a video element on iphone

I currently have a video using the html5 video tag on a webpage. I need to detect the user touching anywhere on the video tag. I'm using the jquery library but it seems any touch detection even if I do it on the whole body tag, it will not register having been touched. I have used the following:

$(document).ready(function () {
            $('video').bind( "touchstart", function(e){alert('Video Clicked!')} );
    });

Any ideas on how to make the video respond to a touch on iphone?

Upvotes: 1

Views: 795

Answers (1)

Andrew Howard
Andrew Howard

Reputation: 3072

I've managed to do it! Short answer IOS prevents any elements overlaying a video tag to have working click function methods on top of it (click functions will just be ignored). The solution is to NOT use a video tag initially but to make your own div tag with data-tag elements on it. Once you click this div, you then need to inject all the important values into a video tag on the fly. Once this is done you can then run your own video player script (I piggy backed on video js). I have a working zip folder example which is based on the bbc iplayer = http://www.andy-howard.com/recreate-bbc-iplayer/index.html

Please spread this around. This has taken me alot of time to make so I hope you find it useful.

Upvotes: 1

Related Questions