HTML5 提供了一个内置的 <video> 元素，用于在网页中嵌入视频。在播放视频时，有时会发现视频突然停止播放并显示“正在缓冲”等字样。这通常是由于网络连接不稳定或服务器响应慢导致的。为了提高用户体验，我们可以通过 JavaScript 检测视频是否因缓冲而暂停，并采取相应的措施。
监听 waiting 事件
当视频因缓冲而暂停时，<video> 元素会触发 waiting 事件。我们可以通过监听该事件来检测视频是否因缓冲而暂停。以下是示例代码：
<video id="myVideo" src="myVideo.mp4"></video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('waiting', function() {
console.log('The video is buffering');
});
</script>上述代码创建了一个 <video> 元素，并添加了一个 waiting 事件监听器。当视频因缓冲而暂停时，该监听器会在控制台输出一条消息。
监听 progress 事件
除了 waiting 事件之外，还可以监听 progress 事件来检测视频是否正在缓冲。该事件会在视频下载数据时周期性地触发。如果视频正在缓冲，progress 事件的 target 属性会包含一个 buffered 对象，它表示已经下载的视频范围。
以下是示例代码：
-- -------------------- ---- -------
------ ------------ --------------------------
--------
----- ----- - -----------------------------------
---------------------------------- ---------- -
-- ---------------------- - -- -
---------------- ----- -- ---------- ----------------------- - ---------------------
-
---
---------上述代码创建了一个 <video> 元素，并添加了一个 progress 事件监听器。当视频正在缓冲时，该监听器会在控制台输出当前已下载的视频范围与当前播放时间之差。
显示缓冲状态
除了在控制台输出信息之外，我们还可以通过界面元素显示视频缓冲状态。例如，可以添加一个带有“正在缓冲”文本的元素，在视频因缓冲而暂停时显示出来。以下是示例代码：
-- -------------------- ---- -------
------ ------------ --------------------------
---- ------------------ ----------------------------------
--------
----- ----- - -----------------------------------
----- ------------- - -----------------------------------------
--------------------------------- ---------- -
--------------------------- - --------
---
--------------------------------- ---------- -
--------------------------- - -------
---
---------上述代码创建了一个 <video> 元素和一个带有“正在缓冲”文本的 <div> 元素，并添加了两个事件监听器。当视频因缓冲而暂停时，该监听器会显示出带有“正在缓冲”文本的元素；当视频恢复播放时，该监听器会隐藏该元素。
结论
通过监听 waiting 和 progress 事件，我们可以检测 HTML5 视频是否因缓冲而暂停，并采取相应的措施来提高用户体验。同时，我们还可以通过界面元素显示视频缓冲状态，让用户更直观地了解视频的加载情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29102