如何使用 JavaScript 控制 <audio> 和 <video> 元素？

可以通过 DOM 方法和属性来操作这些媒体元素。

以下是一些常见的操作方法和示例：

1. 获取元素

首先，使用 document.getElementById() 或其他选择器获取音频或视频元素的引用：

const audioElement = document.getElementById("myAudio");
const videoElement = document.getElementById("myVideo");

2. 播放和暂停

可以使用 .play() 和 .pause() 方法控制音频和视频的播放。

// 播放
audioElement.play();
videoElement.play();

// 暂停
audioElement.pause();
videoElement.pause();

3. 设置音量

使用 .volume 属性设置音量，范围是 0.0（静音）到 1.0（最大音量）。

audioElement.volume = 0.5; // 设置音量为50%
videoElement.volume = 0.7; // 设置音量为70%

4. 控制播放进度

使用 .currentTime 属性设置或获取当前播放时间（以秒为单位）。

// 跳转到 30 秒
audioElement.currentTime = 30;
videoElement.currentTime = 30;

// 获取当前时间
const currentAudioTime = audioElement.currentTime;
const currentVideoTime = videoElement.currentTime;

5. 监听事件

可以为音频或视频元素添加事件监听器，例如监听播放、暂停、结束等事件。

audioElement.addEventListener("ended", () => {
  console.log("Audio ended");
});

videoElement.addEventListener("play", () => {
  console.log("Video is playing");
});

6. 显示和隐藏控件

使用 .controls 属性来显示或隐藏默认的音频/视频控件。

audioElement.controls = true; // 显示控件
videoElement.controls = false; // 隐藏控件

7. 完整示例

<audio id="myAudio" src="audio.mp3"></audio>
<video id="myVideo" src="video.mp4" width="640" height="360"></video>
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

<script>
  const audioElement = document.getElementById("myAudio");
  const videoElement = document.getElementById("myVideo");
  const playButton = document.getElementById("playButton");
  const pauseButton = document.getElementById("pauseButton");

  playButton.addEventListener("click", () => {
    audioElement.play();
    videoElement.play();
  });

  pauseButton.addEventListener("click", () => {
    audioElement.pause();
    videoElement.pause();
  });
</script>