在 Web 开发中，使用 HTML 的 <audio> 和 <video> 元素可以很容易地嵌入音频和视频文件到网页中。而播放这些音视频文件时，我们可以利用其 DOM 对象上的 play 事件来执行一些操作。
什么是 play 事件
play 事件会在音频或视频文件开始播放时触发。我们可以通过 JavaScript 监听这个事件，并在事件发生时执行一些特定的操作。
如何监听 play 事件
要监听 <audio> 或 <video> 元素的 play 事件，我们可以使用 addEventListener 方法来为其添加一个事件处理函数。示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- ------------
-------
------
------ ------------ ----------- ------------ ---------
------- --------------- -----------------
--------
--------
----- ----- - -----------------------------------
------------------------------ ---------- -
------------------ -- ----------
-- ------------
---
---------
-------
-------在上面的代码中，我们首先获取了一个 id 为 myVideo 的 <video> 元素，然后使用 addEventListener 方法为其添加了一个 play 事件处理函数。当视频开始播放时，会在控制台输出 Video is playing。
play 事件的应用
play 事件常常用于在音频或视频文件开始播放时执行一些操作，比如显示播放按钮、更新播放状态等。
除此之外，我们还可以结合其他事件，比如 pause 事件，来实现更加复杂的功能。例如，当视频暂停时隐藏播放按钮，当视频播放时显示暂停按钮。
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- ------------
-------
---------- ---------- -
-------- -----
-
--------
-------
------
------ ------------ ----------- ------------ ---------
------- --------------- -----------------
--------
------- ------------------------------
------- --------------------------------
--------
----- ----- - -----------------------------------
----- ------- - ------------------------------------
----- -------- - -------------------------------------
------------------------------ ---------- -
--------------------- - -------
---------------------- - --------
---
------------------------------- ---------- -
--------------------- - --------
---------------------- - -------
---
--------------------------------- ---------- -
-------------
---
---------------------------------- ---------- -
--------------
---
---------
-------
-------在上面的代码中，我们首先定义了两个按钮，一个用于播放，一个用于暂停。当视频播放时，隐藏播放按钮并显示暂停按钮；当视频暂停时，显示播放按钮并隐藏暂停按钮。同时，我们为两个按钮分别添加了点击事件，通过调用 <video> 元素的 play 和 pause 方法来实现播放和暂停功能。
通过 play 事件，我们可以实现更加交互丰富的音视频播放页面，为用户提供更好的体验。