在现代 Web 开发中，HTML5 视频已成为普遍使用的媒体类型之一。然而，在实现视频播放时，一些开发人员可能会遇到一个常见的问题，即如何在关闭包含视频的模态框时停止视频的播放。本文将介绍使用 Javascript 来解决这个问题。
1. 监听模态框关闭事件
要停止 HTML5 视频的播放，我们需要首先获得关闭模态框的事件。通过监听 hidden.bs.modal 事件（Bootstrap 4 的默认事件名称），我们可以在关闭模态框时执行一些操作。
const modal = document.getElementById('myModal');
modal.addEventListener('hidden.bs.modal', function (event) {
// 在此处添加代码以停止视频播放
});在上面的示例代码中，我们假设存在一个 id 为 myModal 的模态框，并向其添加了事件监听器。
2. 获取视频元素并停止视频播放
在获得模态框关闭事件后，下一步是获取包含视频的元素并停止视频的播放。我们可以使用以下代码来获取视频元素：
const video = document.getElementById('myVideo');这里，我们假设存在一个 id 为 myVideo 的视频元素。一旦获得了视频元素，我们就可以使用以下代码来停止视频的播放：
video.pause(); video.currentTime = 0;
第一行代码将暂停视频的播放，而第二行则将当前时间设置为 0，以确保视频从头开始播放。
3. 完整示例代码
下面是一个完整的示例代码，演示如何使用 Javascript 来停止 HTML5 视频的播放：
-- -------------------- ---- -------
---- --- ---
---- ------------- ------------- ------------- -------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
--- ------------------------- ----------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
------ ------------ ------------------------
------
---- ---------------------
------- ------------- ---------- -------------- -----------------------------------
------- ------------- ---------- ----------------- ----------------
------
------
------
------
--------
----- ----- - -----------------------------------
----- ----- - -----------------------------------
----------------------------------------- -------- ------- -
--------------
----------------- - --
---
---------在上面的示例代码中，我们创建了一个包含视频的模态框，并向其添加了一个关闭事件监听器。当模态框关闭时，视频的播放将被停止并重置到起始位置。
4. 总结
在本文中，我们介绍了如何使用 Javascript 来解决关闭包含 HTML5 视频的模态框时停止视频播放的问题。通过监听 hidden.bs.modal 事件并获取视频元素，我们可以轻松地停止视频的播放并确保在下次播放时从头开始。这一技巧对于需要在网站上实现视频播放功能的开发人员十分有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26786