Menu
I'm trying to attach some events to an HTML5 Video element inside my iPad web app but they don't seem to be firing? I've tested this both on the device and in the simulator and get the same results. The events however (for the onclick at least) work fine in desktop Safari. I've also tried swapping the video element for a div and the events fire fine? Has anybody else come across this and have an idea for a work around?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test video swipe</title>
</head>
<body>
<video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>
<script>
var theVid = document.getElementById("currentlyPlaying");
theVid.addEventListener('touchstart', function(e){
e.preventDefault();
console.log("touchstart");
}, false);
theVid.addEventListener('click', function(e){
e.preventDefault();
console.log("click");
}, false);
theVid.addEventListener('touchmove', function(e){
console.log("touchmove");
}, false);
theVid.addEventListener('touchend', function(e){
console.log("touchend");
}, false);
theVid.addEventListener('touchcancel', function(e){
console.log("touchcancel");
}, false);
</script>
</body>
</html>
492
The video element, on the iPad, will swallow events if you use the controls attribute. You have to provide your own controls if you want the element to respond to touch events.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
