10

我正在尝试将一些事件附加到我的 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>
4

2 回答 2

16

如果您使用 controls 属性，iPad 上的 video 元素将吞噬事件。如果您希望元素响应触摸事件，则必须提供自己的控件。

于 2010-09-27T12:28:59.403 回答
9

根据我过去几周相当痛苦的经历，我可以开始这样的列表（至少对于 iPad 3.2）。其中一些“特征”可能会记录在案，但相关句子通常很难找到。

  • 该volume属性被忽略（您可以设置它，它会出现变化，但设备上的实际音量不会受到影响）。
  • 该currentTime属性是只读的。我的解决方法是调用load()，这至少可以让我重置到剪辑的开头。
  • onended除非控件可见，否则事件将无法可靠发布。我的解决方法是监视timeupdate事件并将currentTimeduration
  • 正如你所说，autobuffer并且autoplay被禁用。
  • 无论应用程序缓存设置如何，视频都不会在本地缓存。
  • <video>许多 CSS 规则在应用于标签时似乎没有按预期运行- 例如。opacity两者z-index似乎都无效，这意味着您无法调暗或隐藏视频。您可以设置display:none，但这很突然。

正如我所说，这可能不是一个详尽的列表，我欢迎补充或更正。

（另外，经过多次谷歌搜索，我在这里找到了Mobile Safari 支持的 QT 插件方法和属性的一小部分列表）。

于 2010-10-16T15:35:58.213 回答