Question

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

Answer 1

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

Answer 2

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

忽略volume属性（您可以设置它，它似乎会更改，但设备上的实际音量不会受到影响）。
currentTime属性是只读的。我的解决方法是调用load()，这至少允许我重置为剪辑的开头。
除非控件可见，否则onended事件将无法可靠地发布。我的解决方法是监控timeupdate事件并将currentTime与duration进行比较
正如您所说，autobuffer和autoplay已停用。
视频都不会在本地缓存。
许多css规则在应用于<video>标记时似乎没有按预期运行 - 例如。 opacity和z-index似乎都无效，这意味着您无法调暗或隐藏视频。您可以设置display:none，但这非常突然。

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

（另外，在很多谷歌搜索之后，我找到了移动Safari支持的QT插件方法和属性的微薄子集的列表here。

iPad上的HTML5视频元素不会触发onclick或touchstart事件？

2 个答案: