HTML 音频/视频 DOM ended 属性

在 web 前端开发中，我们经常需要在网页中嵌入音频或视频文件，以丰富用户体验。HTML5 提供了 <audio> 和 <video> 标签，让我们可以很方便地实现这一功能。在控制音频/视频播放过程中，ended 属性是一个非常有用的属性，它表示音频/视频是否已经播放完毕。

了解 ended 属性

ended 属性是 HTML 音频/视频 DOM 对象的一个只读属性，它返回一个布尔值，表示音频/视频是否已经播放完毕。当音频/视频播放结束时，ended 属性的值将变为 true，否则为 false。

如何使用 ended 属性

我们可以通过监听 ended 事件来实现在音频/视频播放结束时执行一些操作。下面是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Ended Event Example</title>
</head>
<body>

<audio controls id="myAudio">
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<script>
const audio = document.getElementById('myAudio');

audio.addEventListener('ended', function() {
  alert('Audio has ended!');
});
</script>

</body>
</html>

在上面的示例中，我们创建了一个带有音频控件的 <audio> 元素，并监听了其 ended 事件。当音频播放结束时，会弹出一个对话框提示用户。

注意事项

• ended 属性是只读的，我们不能通过修改它的值来控制音频/视频的播放状态。
• 在监听 ended 事件时，最好使用 addEventListener 方法来添加事件处理程序，而不是直接将函数赋值给 ended 属性。

通过学习和理解 ended 属性，我们可以更好地控制音频/视频的播放状态，为用户提供更好的体验。希望本文对你有所帮助！