什么是視頻html5元素上的播放事件？

Question

我在頁面上嵌入了一個視頻html5標簽。 我需要在用戶點擊“播放按鈕”時觸發操作。 但是我找不到如何將它綁定到我的動作上。 是否有我需要的活動？ 我正在使用jQuery ...

謝謝！

Answer 1

這個W3C演示頁面有幫助嗎？ http://www.w3.org/2010/05/video/mediaevents.html看來播放事件只是“播放”。

例如：

$('video').bind('play', function (e) {
    // do something
});

要么

$('video').on('play', function (e) {
    // do something
});

Answer 2

我使用了以下頁面中的代碼並將其剝離：

<script language="javascript">
    document.addEventListener("DOMContentLoaded", init, false);

    function init() {
        var _video = document.getElementById("video");
        _video.addEventListener("playing", play_clicked, false);
    }

    function play_clicked() {
        alert("play was clicked");
    }
</script>

<video id='video'
  controls preload='none' 
  poster="http://media.w3.org/2010/05/sintel/poster.png">
  <source id='mp4'
    src="http://media.w3.org/2010/05/sintel/trailer.mp4"
    type='video/mp4'>
  <p>Your user agent does not support the HTML5 Video element.</p>
</video>

希望我可以幫忙。

Answer 3

HTML5視頻元素具有可以使用的onplay事件，不需要添加偵聽器的額外步驟。 此解決方案也不需要JQuery。

var myVid = document.getElementById('video');    
if (myVid !== null) { // Possibility of no video loaded in DOM
    myVid.onplay = function () {
        //do something
    };
}

MDN有詳細信息。