Detecting touches on an HTML5 <video> in a UIWebView on the iPhone

Question

I would like to be able to detect touch/click events on the tag in the UIWebView. But it doesn't look like it responds to that event. Any ideas?

videoElement.addEventListener('touchstart', myFunc, false);

Could also be the 'click' event.

Answer 1

There is a way to do this, but it isn't pretty.

UIWebView allows you to run arbitrary javascript, e.g. [webview stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('html')[0].innerHTML"]. So, when the user taps on the videoElement, you can have a javascript run which sets the innerHTML of a specific element, which you can grab from this function.

However, how do you know when to run this function on the Objective-C side? Well, there are two options. First (though I wouldn't suggest it since it would be slow), you can set up a polling function which runs every so often to check the value of the stringByEvaluatingJavascriptFromString: function. The second option, which I think is probably the best one, is to actually subclass WebView to watch touches on the WebView. So, you can override the following function:

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [super touchesEnded:touches withEvent:event];
    NSString *string = [self stringByEvaluatingJavascriptFromString:@"document.getElementById('videoTapped').innerHTML"]
    if ([string isEqual:@"Something"]) {
        // do something here
    }
}