iPad上的HTML5視頻元素不會觸發onclick或touchstart事件？

我想附加一些事件到我的iPad Web應用程序中的HTML5視頻元素，但他們似乎並沒有射擊？我已經在設備和模擬器上測試了這一點，並得到了相同的結果。然而，這些事件（至少onclick）在桌面Safari中工作正常。我也嘗試換一個div的視頻元素，事件觸發罰款？有沒有人遇到這個問題，並有一個解決辦法的想法？iPad上的HTML5視頻元素不會觸發onclick或touchstart事件？

<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>

來源

2010-09-27 ad rees

如果您使用controls屬性，iPad上的視頻元素將吞服事件。如果您希望元素響應觸摸事件，則必須提供自己的控件。

來源

2010-09-27 12:28:59 Quentin

太棒了！工作！我遇到了很多與移動Safari和桌面Safari不兼容的問題。他們中的一些人喜歡在視頻中禁用自動播放功能，但在這些網站上記錄了這些內容，但似乎有大量無證的怪癖或者我敢說錯誤！你知道列出這些差異的資源嗎？ – 2010-09-27 14:19:19

我不能使它工作:(你究竟是如何創建視頻元素？我看起來像 and in JS我正在做document.getElementById（」vid「）。addEventListener（'click'，function（e）{e.preventDefault（）; alert（」clicked「）;}） ;它適用於桌面Safari瀏覽器，但不能在iPad/iPhone的罰款請提出了一些解決方法 – bhups 2011-01-10 10:20:54

@bhups - 如果你有一個問題，問一個問題* *，不要在別人的答案，不同的問題只是評論 – Quentin 2011-01-10 10:50:36

從我自己在過去幾周的相當痛苦的經歷中，我可以開始這樣一個列表（至少對於iPad 3.2）。其中一些「功能」可能會被記錄下來，但相關的句子通常很難找到。

volume屬性被忽略（您可以設置它，它會出現變化，但設備上的實際音量不會受到影響）。
的currentTime屬性爲只讀。我的解決方法是撥打load()，它至少允許我重置到剪輯的開頭。
onended事件不會可靠地發佈，除非控件可見。我的解決方法是監視timeupdate事件，並將currentTime與duration
比較，如您所說，autobuffer和autoplay已禁用。
無論應用程序緩存設置如何，視頻都不會在本地緩存。
許多css規則似乎不適用於<video>標籤 - 例如。 opacity和z-index都似乎無效，這意味着您不能調暗或隱藏視頻。您可以設置display:none，但這非常突兀。

正如我所說，這可能不是一個詳盡的清單，我歡迎補充或更正。（另外，很多使用google搜索，我發現了一個列表here的移動Safari支持的QT插件方法和屬性的微不足道的子集）。

來源

2010-10-16 15:35:58 wodenx

偉大的答案我也經歷了上述所有，需要了解它的困難。希望有人在開始開發之前閱讀本文！ – Develoger 2013-08-29 12:25:21

同樣在這裏，這些設備上的視頻可能是一個巨大的痛苦。我過去的兩週時間非常可怕，對這個出色的答案提出了幾乎相同的結論。 – Nobita 2013-10-24 23:56:18

iPad上的HTML5視頻元素不會觸發onclick或touchstart事件？

回答

相關問題