JavaScript 控制 ＜audio＞ 和 ＜video＞ 元素

1. 获取元素引用

<audio id="myAudio" controls>
  <source src="example.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video id="myVideo" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

const audio = document.getElementById('myAudio');
const video = document.getElementById('myVideo');

2. 播放和暂停

播放：使用play()方法。
暂停：使用pause()方法。

// 播放音频
audio.play();

// 暂停视频
video.pause();

3. 调整音量

音量值范围从0（静音）到1（最大音量）。可以使用volume属性来设置或获取当前音量。

// 设置音频音量为50%
audio.volume = 0.5;

// 获取当前视频音量
console.log(video.volume);

4. 跳转到特定时间点

可以使用currentTime属性来设置或获取当前播放的位置（单位为秒）。

// 跳转到音频的第30秒
audio.currentTime = 30;

// 查看当前视频播放的位置
console.log(video.currentTime);

5. 监听事件

可以监听各种事件来响应用户的交互或媒体状态的变化。常用的事件包括：

play：当播放开始时触发。
pause：当播放暂停时触发。
ended：当播放结束时触发。
timeupdate：当播放位置改变时定期触发。

// 当音频播放时执行函数
audio.addEventListener('play', function() {
  console.log('音频正在播放');
});

// 当视频结束时执行函数
video.addEventListener('ended', function() {
  console.log('视频播放结束');
});

6. 全屏播放

可以使用requestFullscreen()方法让视频全屏播放。

// 让视频全屏播放
if (video.requestFullscreen) {
  video.requestFullscreen();
} else if (video.mozRequestFullScreen) { // Firefox
  video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
  video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { // IE/Edge
  video.msRequestFullscreen();
}