在前端开发中，我们经常需要控制音视频的播放，包括判断当前是否有视频正在播放。本文将介绍如何使用 JavaScript 判断当前正在播放的视频元素。
获取视频元素
要判断视频是否正在播放，首先需要获取到视频元素。可以通过以下代码获取当前页面上第一个 video 元素：
const video = document.querySelector('video');如果页面上有多个视频元素，可以根据需要修改选择器。
判断视频是否正在播放
判断视频是否正在播放，可以通过监控视频的 play 和 pause 事件来实现。当视频开始播放时触发 play 事件，当视频暂停时触发 pause 事件。
-- -------------------- ---- ------- ----- ----- - -------------------------------- -- -- ---- -- ------------------------------ -- -- - ------------------ -- ---------- --- -- -- ----- -- ------------------------------- -- -- - ------------------ -- --------- ---
通过上述代码可以判断视频是否正在播放。但是，在某些情况下（如网络不稳定），视频可能会出现缓冲等待状态，此时视频元素的 paused 属性值为 false，但实际上视频并没有开始播放。因此，仅仅依靠 paused 属性不能完全判断视频是否正在播放。
更加可靠的方法是，判断视频的 currentTime 属性是否在变化。因为视频只有在播放时，currentTime 属性才会随着时间的推移而变化。
-- -------------------- ---- -------
----- ----- - --------------------------------
--- -------- - --
-- ----------------
-------------- -- -
-- -------------- -- ----------------- --- --------- -
------------------ -- ----------
-------- - ------------------
-
---- -
------------------ -- ---------
-
-- -----上述代码中，使用 setInterval 每隔 100 毫秒检查视频是否正在播放。如果视频没有暂停且当前时间与上一次记录的时间不同，就判断视频正在播放。
示例代码
以下是一个完整的示例代码，用于判断当前页面上第一个视频元素是否正在播放：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ --------------
-------
------
------ ------------------------
--------
----- ----- - --------------------------------
--- -------- - --
-- -- ---- --
------------------------------ -- -- -
------------------ -- ----------
---
-- -- ----- --
------------------------------- -- -- -
------------------ -- ---------
---
-- ----------------
-------------- -- -
-- -------------- -- ----------------- --- --------- -
------------------ -- ----------
-------- - ------------------
-
---- -
------------------ -- ---------
-
-- -----
---------
-------
-------结论
在前端开发中，判断视频是否正在播放是一个常见的需求。本文介绍了通过监听视频的 play 和 pause 事件以及检查视频的 currentTime 属性来判断视频是否正在播放的方法，并提供了示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15132