HTML Audio/Video DOM playing 事件

在 web 前端开发中，我们经常会遇到需要控制音频和视频播放的场景。HTML5 提供了 <audio> 和 <video> 标签，通过这些标签我们可以很方便地在网页中嵌入音频和视频内容。在控制音频和视频播放过程中，playing 事件是一个非常重要的事件，它表示音频或视频已经开始播放。

什么是 playing 事件

playing 事件在音频或视频开始播放时触发。当媒体资源被加载并准备就绪后，播放控件调用 play() 方法开始播放媒体时，将触发该事件。

如何使用 playing 事件

要使用 playing 事件，我们需要先获取到 <audio> 或 <video> 元素，然后为其绑定 playing 事件的监听器。当播放事件发生时，我们可以在事件处理函数中执行相应的操作。

示例代码如下：

// 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>HTML Audio/Video DOM playing 事件</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('playing', function() {
  console.log('音频已开始播放');
});
</script>
</body>
</html>

在上面的示例中，我们创建了一个带有控制条的音频播放器，并为其绑定了 playing 事件的监听器。当音频开始播放时，控制台将输出"音频已开始播放"。

注意事项

• playing 事件在音频或视频开始播放时触发，但并不代表媒体资源已经完全加载完成，可能会出现缓冲的情况。
• 可以通过监听 playing 事件来实现一些播放时的交互效果，比如显示播放进度条、更改播放按钮状态等。

结论

通过本文的介绍，我们了解了 HTML Audio/Video DOM playing 事件的基本概念和如何在前端开发中使用它。希望本文对你有所帮助，祝愿你在开发中能够更加游刃有余地控制音频和视频播放。