10

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>
ad rees
  • 1,522
  • 2
  • 11
  • 16

2 Answers2

16

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Brilliant! that worked! I've come across quite a few inconstancies with mobile Safari and desktop Safari. Some of them like disabling autoplay on video are documented on the apple site but there seem to be loads of undocumented quirks or dare I say bugs! Do you know of any resources that list these differences? – ad rees Sep 27 '10 at 14:19
  • I couldn't make it work :(. How exactly are you creating the video element? Mine looks like and in JS i'm doing document.getElementById("vid").addEventListener('click', function(e){ e.preventDefault();alert("clicked");}); It works fine on desktop safari but not on ipad/iphone. Please suggest some workaround. – bhups Jan 10 '11 at 10:20
  • @bhups — if you have a question, ask a *question*, don't just comment on someone else's answer to a different problem. – Quentin Jan 10 '11 at 10:50
  • hi David, my problem is same but I'm not clear how removing controls attribute is solving this problem. I tried doing the same without any success. I didn't ask as it might sound like duplicate of this question. – bhups Jan 10 '11 at 11:01
  • Since you have removed the controls attribute, it is clearly not the same question. Even if it was, you could reference this question and explain how your problem differs. – Quentin Jan 10 '11 at 13:13
  • Hi David, here is my question with little variation. http://stackoverflow.com/questions/4654443/html5-video-element-on-ipad-doesnt-fire-onclick – bhups Jan 11 '11 at 05:16
9

From my own rather painful experiences over the last couple of weeks I can begin such a list (at least for iPad 3.2). Some of these "features" may be documented, but the relevant sentence is often difficult to find.

  • The volume property is ignored (you can set it, and it will appear to change, but the actual volume on the device will not be affected).
  • The currentTime property is read-only. My workaround for this is to call load(), which at least allows me to reset to the beginning of the clip.
  • the onended event will not post reliably unless the controls are visible. My workaround for this is to monitor the timeupdate event and compare the currentTime to the duration
  • as you say, autobuffer and autoplay are disabled.
  • video will not cache locally regardless of the application cache settings.
  • many css rules don't seem to function as expected when applied to the <video> tag - eg. opacity and z-index both seem ineffectual, which means you cannot dim or hide a video. You can set display:none, but that is very abrupt.

As I say, this is probably not an exhaustive list, and I'd welcome additions or corrections.

(Also, after much googling, I found a list here of the meagre subset of QT Plugin methods and properties that are supported on Mobile Safari).

wodenx
  • 281
  • 2
  • 5
  • 1
    Great answer I have also experienced all of the above and needed to learned it the hard way. Hope that someone will read this before start of development! – Develoger Aug 29 '13 at 12:25
  • Same here, videos on such devices can be a great great pain. My last 2 weeks have been quite dreadful and came up with pretty much the same conclusions of this excellent answer. – Aurelio Oct 24 '13 at 23:56