我试图将一些事件附加到我的iPad网络应用程序中的
HTML5视频元素,但它们似乎没有被触发？我已经在设备和模拟器中测试了这两个,并得到相同的结果.然而,事件(至少为onclick)在桌面Safari中工作正常.我也试过交换一个div的视频元素,事件是否正常？有没有人遇到这个,有一个工作的想法？
<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>
解决方法
如果您使用控件属性,iPad上的视频元素会吞咽事件.如果您希望元素响应触摸事件,您必须提供自己的控件.
