如何知道用戶點擊或自動播放HTML視頻播放事件？

有一個HTML視頻標籤autoplay屬性。我想知道play事件何時被觸發，是由自動播放引起的，還是由用戶點擊播放按鈕引起的？如何知道用戶點擊或自動播放HTML視頻播放事件？

來源

2017-02-09 Martin Zhai

AFAIK並不是真正瞭解現成區別的防彈方法（除非我忽略了此屬性）。

在這種情況下解決此問題的一種方法是在各個階段使用標記。例如，在視頻元素上的canplay事件上設置一個標記，該標記在合理的時間範圍內被清除（過期），然後可以與play事件一起使用（我將在稍後顯示一個示例）。

由於這有點「駭人聽聞」，可能會出現特殊情況，即狀態滑過，預加載和準備時間，快速用戶單擊按鈕等都可能發揮作用。

甲概念性例如：

（注：由於某些原因，在下面的play事件堆疊片斷會觸發暫停以及..）。

一如既往地使用自己的風險！

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

 
var tref;           // to expire flag below 
 
var autoPlay = false;        // if we started by autoplay (expires) 
 

 
video.addEventListener("canplay", function(e) { 
 
    clearTimeout(tref);        // reset expire 
 
    autoPlay = this.autoplay; 
 
    if (!autoPlay) document.querySelector("div").innerHTML = "Ready."; 
 
    setTimeout(function() {autoPlay = false}, 100); // clear autoPlay flag 
 
}); 
 

 
video.addEventListener("play", function(e) { 
 
    document.querySelector("div").innerHTML = autoPlay ? "Autoplay" : "Manual play"; 
 
}); 
 

 
video.src = "//media.w3.org/2010/05/sintel/trailer.mp4";

video {width:320px}

<div>Loading video...</div> 
 
<video muted autoplay controls preload=auto></video>

來源

2017-02-09 13:46:40 K3N

有一個問題，當我運行的代碼片段。在將事件監聽器添加到它之前，視頻'play'事件被觸發。我做錯什麼了嗎？ –

@MartinZhai通常可以通過設置最後的src來解決（如示例中所示） – K3N

我發現Chrome在點擊播放/暫停按鈕時不會生成'click'事件。首先，我認爲這是最新版本的一個新功能，但我嘗試過Chrome 40+，仍然一樣。你有解決這個問題嗎？ –

如何知道用戶點擊或自動播放HTML視頻播放事件？

回答

相關問題