HTML5 Video Element on iPad doesn't fire onclick or touchstart events?

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>

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.

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).

来源：https://stackoverflow.com/questions/3803702/html5-video-element-on-ipad-doesnt-fire-onclick-or-touchstart-events

标签

javascript

mobile-safari

cordova

html5-video