如何跟蹤HTML5視頻控件事件？

我試圖跟蹤HTML5視頻的事件，特別是在默認控制欄上暫停/播放（適用於非移動Chrome和Safari）。如何跟蹤HTML5視頻控件事件？

這裏是我的測試代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Video Test</title> 
</head> 
<body> 
    <video id="video" width="320" height="240" src="http://www.w3schools.com/tags/mov_bbb.mp4" controls> 
     <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> 
    </video> 

    <script> 
    var video = document.getElementById("video"); 

    video.onclick = function(){ 
     if(!this.paused) { 
      this.pause(); 
      console.log("paused"); 
     } else { 
      this.play(); 
      console.log("playing"); 
     } 
    } 
    </script> 
</body> 
</html>

如果我切換播放/暫停視頻的中心，事件觸發就好了。

問題是，當我點擊默認控制欄（左下角）上的暫停/播放按鈕時，雖然視頻暫停/播放，但日誌不顯示（我認爲該事件會暫停/播放）。

我還沒有找到日誌不顯示的原因，並希望有人指出我在正確的方向。

在我的實際代碼中，根據視頻是暫停還是播放，定時器功能將被調用（或終止）。

謝謝。

斯蒂芬

來源

2017-02-23 user282648

鼠標事件其實不是默認控制欄上可見。你必須做出自己的控制。但是，你爲什麼試圖檢查它？如果您想知道視頻何時暫停，那麼會有暫停事件。此按鈕不是您的用戶暫停視頻的唯一方式（空格鍵，點擊視頻中間...） – Kaiido

我的完整代碼處理了您的問題。這是一個貿易展覽觸摸屏演示的客戶請求。當演示文稿空閒時，它會回到主屏幕。空閒時事件設置一個計時器。我很欣賞這些信息，如果測試證明這是一個問題，我會推動刪除它。 – user282648

你加入onclick事件暫停和恢復的視頻，但你不處理的暫停和播放的事件。當您從控制欄中暫停播放時，會觸發這些事件。

這是我會怎麼做：

var video = document.getElementById("video"); 

function StartPauseHandler(e) { 
    if (e.type === "pause") { 
     console.log("paused"); 
    } else if (e.type === "playing") { 
     console.log("playing"); 
    } else { 
     if(!this.paused) { 
      this.pause(); 
     } else { 
      this.play();; 
     } 
    } 
} 

video.addEventListener("click", StartPauseHandler); 
video.addEventListener("pause", StartPauseHandler); 
video.addEventListener("playing", StartPauseHandler);

來源

2017-02-23 21:30:17 Canolyb1

謝謝！這工作完美！ – user282648

如何跟蹤HTML5視頻控件事件？

回答

相關問題