我正在尝试将一些事件附加到我的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>
我试图捕捉的"手势"只是当一个元素(其他或相同)已经触摸它时的轻击.因此,触摸(1)按下按钮,同时触摸(2)轻触所选选项,触摸(1)释放按钮.
我遇到的问题是最后一点.当我释放最后一根手指时,"touchend"事件没有被解雇？所以我无法按下按钮？
..而且"touchend"事件总是有touches.length = 0？
这是一些代码,所以你可以看到我的意思.我想这可能是移动游猎中的一个错误？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Multi-touch problem</title>
<style>
#touchpane{
width:900px;
height:500px;
background-color:#333;
}
</style>
</head>
<body>
<div id="touchpane" click="void();"></div>
<script>
var tp = document.getElementById("touchpane");
tp.addEventListener('touchstart', function(e){
e.preventDefault();// to stop copy and paste
console.log("touchstart " + e.touches.length );
}, false)
tp.addEventListener('touchend', function(e){
console.log("touchend " + e.touches.length );
// not called when last finger removed?
}, false)
tp.addEventListener('touchcancel', function(e){
console.log("touchcancel");
}, false)
</script>
</body>
</html>
我一直在玩HTML5视频标签,当你不能支持编解码器时,我很困惑如何最好地降级？
对于那些不支持视频标签的旧浏览器(或IE)来说,这很简单:
<video width="320" height="240">
<source src="vid.ogv" type='video/ogg'>
<source src="vid.mp4" type='video/mp4'>
<object>
<!-- Embed Flash video here to play mp4 -->
<object>
</video>
它们将通过并将收到Flash版本(或其他替代品,如图像!)
浏览器何时支持标签但不支持编解码器 - 例如FireFox 3.5 - 我不支持OGG(可能因为我已经拥有大量的H.264档案):
<video width="320" height="240">
<source src="vid.mp4" type='video/mp4'>
<object>
<!-- Embed Flash video here to play mp4 -->
<object>
</video>
我在FireFox 3.5中获得的只是一个带有x的灰色框.对于FireFox用户来说,这并不是一个很好的用户体验!我只能想到使用JavaScript来检查FF3.5并更改DOM!这真的是一个又一个糟糕的老人!...或者是否有一些我错过的规范,就像'novideo'标签一样？