视频 html5 元素上的播放事件是啥？

Posted 2023-05-07

【中文标题】视频 html5 元素上的播放事件是啥？

【英文标题】：What's the play event on a video html5 element?视频 html5 元素上的播放事件是什么？

【发布时间】：2012-09-22 17:23:31

【问题描述】：

我在页面上嵌入了一个视频 html5 标记。当用户单击“播放按钮”时，我需要触发一个动作。但我找不到如何将其绑定到我的操作。有我需要的活动吗？我正在使用 jQuery...

谢谢！

【问题讨论】：

但是你想在按钮点击时触发新事件？或者您想绑定到<video> 的play 事件？

【参考方案1】：

这个 W3C 演示页面有帮助吗？ http://www.w3.org/2010/05/video/mediaevents.html 看来 play 事件只是“播放”。

例如：

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

或

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

【参考方案2】：

我使用了以下page 中的代码并将其剥离：

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

希望我能帮上忙。

【讨论】：

您答案中的演示页面非常酷，显示了可以从视频播放器收集的事件和数据。

【参考方案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 有完整的详细信息。