📌  相关文章
📜  HTML | DOM 暂停事件(1)

📅  最后修改于: 2023-12-03 15:01:12.587000             🧑  作者: Mango

HTML | DOM 暂停事件

在 HTML 和 JavaScript 中，暂停事件是一种事件类型，通常用于在媒体播放期间暂停媒体。当用户点击媒体控制器的暂停按钮时，此事件将被触发。我们可以使用 JavaScript 监听暂停事件，并在触发时执行特定的代码。

事件属性

暂停事件具有以下有用的属性：

  • currentTime：指示媒体当前的时间，以秒为单位。
  • duration：指示媒体的总时长，以秒为单位。
  • target：指示触发暂停事件的媒体元素。

我们可以使用这些属性来执行各种任务，例如更新媒体的播放进度条或显示暂停按钮。

监听暂停事件

要监听暂停事件，我们可以使用 addEventListener() 方法。以下是基本的语法：

const media = document.getElementById('myMediaElement');

media.addEventListener('pause', function() {
  // 在这里编写要执行的代码
});

在上面的代码中，pause 是暂停事件的事件类型。当用户点击媒体控制器的暂停按钮时，该事件将被触发，并执行传入的函数。

示例

以下是一个基本的示例，演示如何使用暂停事件在媒体控件下方添加一个暂停按钮：

<!DOCTYPE html>
<html>
  <head>
    <title>暂停事件示例</title>
  </head>
  <body>
    <audio id="myAudio" src="example.mp3"></audio>
    <button id="pauseBtn" style="display:none">暂停</button>

    <script>
      const audio = document.getElementById('myAudio');
      const pauseBtn = document.getElementById('pauseBtn');

      audio.addEventListener('play', function() {
        pauseBtn.style.display = 'inline'; // 设置按钮显示
      });

      audio.addEventListener('pause', function() {
        pauseBtn.style.display = 'none'; // 隐藏按钮
      });

      pauseBtn.addEventListener('click', function() {
        audio.pause(); // 暂停音频
      });
    </script>
  </body>
</html>

在上面的代码中，当音频开始播放时，代码会显示暂停按钮。当用户点击暂停按钮时，音频将暂停，并隐藏暂停按钮。我们使用 display:none CSS 属性来隐藏暂停按钮。

总结

暂停事件是一种在 HTML 和 JavaScript 中非常有用的事件类型。可以使用它来创建用户友好的媒体播放器和其他类似的应用程序。我们可以使用暂停事件来监视媒体的播放状态，并在触发暂停事件时执行特定的代码。