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 a开发者_运维知识库n 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
volumeproperty is ignored (you can set it, and it will appear to change, but the actual volume on the device will not be affected). - The
currentTimeproperty is read-only. My workaround for this is to callload(), which at least allows me to reset to the beginning of the clip. - the
onendedevent will not post reliably unless the controls are visible. My workaround for this is to monitor thetimeupdateevent and compare thecurrentTimeto theduration - as you say,
autobufferandautoplayare 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.opacityandz-indexboth seem ineffectual, which means you cannot dim or hide a video. You can setdisplay: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).
加载中,请稍侯......
精彩评论