HTML Audio/Video DOM ended 事件

在 Web 前端开发中，使用 HTML 的 Audio 和 Video 元素来播放音频和视频是非常常见的。而 ended 事件则是这两个元素中非常重要的一个事件，它表示媒体的播放已经结束。在本文中，我将详细介绍 ended 事件的用法以及如何在网页中使用它。

什么是 ended 事件

ended 事件是 HTML Audio 和 Video 元素的一个事件，它在媒体的播放结束时触发。这个事件可以用来执行一些操作，例如在视频播放结束后显示一些相关推荐内容，或者在音频播放结束后自动跳转到下一首歌曲。

如何使用 ended 事件

要使用 ended 事件，首先需要获取到对应的 Audio 或 Video 元素，然后给它绑定 ended 事件的监听器。下面是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>HTML Audio/Video ended 事件</title>
</head>
<body>
    <video id="myVideo" controls>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <script>
        var video = document.getElementById("myVideo");
        video.addEventListener("ended", function() {
            alert("视频播放结束！");
        });
    </script>
</body>
</html>

在上面的示例中，当视频播放结束时，会弹出一个提示框显示"视频播放结束！"。你可以根据自己的需求来在 ended 事件中执行不同的操作。

兼容性

ended 事件在大多数主流浏览器中都有很好的兼容性，不过在一些旧版本的浏览器中可能会有兼容性问题。因此在实际开发中，建议在使用 ended 事件时进行兼容性测试。

总结

ended 事件是 HTML Audio 和 Video 元素中非常重要的一个事件，它可以帮助我们在媒体播放结束时执行一些操作。通过本文的介绍，希望你能更好地理解和应用 ended 事件。如果你有任何问题或疑问，欢迎留言讨论！