JavaScript 播放暂停按钮

在很多 Web 应用程序中，音频和视频是重要组成部分。为了给用户提供更好的体验，添加播放/暂停按钮是非常有必要的。在本文中，我们将探讨如何使用 JavaScript 创建播放暂停按钮。

HTML 代码

我们需要在 HTML 中创建一个视频标签和两个按钮 - 一个用于播放，另一个用于暂停：

<video id="myVideo" width="320" height="240" src="video.mp4"></video>

<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>

请注意，我们使用了 id 属性为视频和按钮元素命名。这将允许我们轻松地在 JavaScript 中引用它们。我们还指定了视频的宽度、高度和源。

JavaScript 代码

获取元素

首先，我们需要获取 HTML 元素。使用 document.getElementById() 方法分别获取视频和按钮元素：

const video = document.getElementById("myVideo");
const playBtn = document.getElementById("playBtn");
const pauseBtn = document.getElementById("pauseBtn");

播放函数

接下来，我们将创建一个函数，该函数将使用 video.play() 方法播放视频。让我们命名这个函数为 playVideo()：

function playVideo() {
  video.play();
}

暂停函数

我们还需要创建一个函数，该函数将使用 video.pause() 方法暂停视频。让我们命名这个函数为 pauseVideo()：

function pauseVideo() {
  video.pause();
}

按钮事件

现在，我们需要给播放和暂停按钮添加事件。在单击按钮时，将分别调用 playVideo() 和 pauseVideo() 函数。使用 addEventListener() 方法将事件添加到按钮中：

playBtn.addEventListener("click", playVideo);
pauseBtn.addEventListener("click", pauseVideo);

完整的 JavaScript 代码将如下所示：

const video = document.getElementById("myVideo");
const playBtn = document.getElementById("playBtn");
const pauseBtn = document.getElementById("pauseBtn");

function playVideo() {
  video.play();
}

function pauseVideo() {
  video.pause();
}

playBtn.addEventListener("click", playVideo);
pauseBtn.addEventListener("click", pauseVideo);

结论

使用 JavaScript 创建播放暂停按钮非常简单。我们使用 document.getElementById() 获取 HTML 元素，使用 video.play() 和 video.pause() 方法播放和暂停视频，并使用 addEventListener() 方法将事件添加到按钮中。我们可以为其他 Web 应用程序中的音频和视频添加类似的播放/暂停按钮。