在 Web 开发中，使用 HTML 的 <audio> 和 <video> 元素可以很容易地嵌入音频和视频文件到网页中。而播放这些音视频文件时，我们可以利用其 DOM 对象上的 play 事件来执行一些操作。
什么是 play 事件
play 事件会在音频或视频文件开始播放时触发。我们可以通过 JavaScript 监听这个事件，并在事件发生时执行一些特定的操作。
如何监听 play 事件
要监听 <audio> 或 <video> 元素的 play 事件，我们可以使用 addEventListener 方法来为其添加一个事件处理函数。示例代码如下：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Play Event Demo</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('play', function() {
console.log('Video is playing');
// 在视频播放时执行其他操作
});
</script>
</body>
</html>在上面的代码中，我们首先获取了一个 id 为 myVideo 的 <video> 元素，然后使用 addEventListener 方法为其添加了一个 play 事件处理函数。当视频开始播放时，会在控制台输出 Video is playing。
play 事件的应用
play 事件常常用于在音频或视频文件开始播放时执行一些操作，比如显示播放按钮、更新播放状态等。
除此之外，我们还可以结合其他事件，比如 pause 事件，来实现更加复杂的功能。例如，当视频暂停时隐藏播放按钮，当视频播放时显示暂停按钮。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Play Event Demo</title>
<style>
.play-btn, .pause-btn {
display: none;
}
</style>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<button class="play-btn">Play</button>
<button class="pause-btn">Pause</button>
<script>
const video = document.getElementById('myVideo');
const playBtn = document.querySelector('.play-btn');
const pauseBtn = document.querySelector('.pause-btn');
video.addEventListener('play', function() {
playBtn.style.display = 'none';
pauseBtn.style.display = 'block';
});
video.addEventListener('pause', function() {
playBtn.style.display = 'block';
pauseBtn.style.display = 'none';
});
playBtn.addEventListener('click', function() {
video.play();
});
pauseBtn.addEventListener('click', function() {
video.pause();
});
</script>
</body>
</html>在上面的代码中，我们首先定义了两个按钮，一个用于播放，一个用于暂停。当视频播放时，隐藏播放按钮并显示暂停按钮；当视频暂停时，显示播放按钮并隐藏暂停按钮。同时，我们为两个按钮分别添加了点击事件，通过调用 <video> 元素的 play 和 pause 方法来实现播放和暂停功能。
通过 play 事件，我们可以实现更加交互丰富的音视频播放页面，为用户提供更好的体验。