HTML5提供audio和video标签嵌入媒体，通过controls属性显示默认控件；2. JavaScript可调用play()、pause()、设置volume、currentTime等实现播放控制；3. 监听play、pause、ended、timeupdate等事件实现交互响应；4. 结合timeupdate和loadedmetadata事件更新进度条，通过change事件实现拖动跳转；最终可构建自定义播放器界面，但自动播放等功能需用户交互触发。
在现代网页开发中，使用JavaScript控制HTML5的音频和视频元素已经成为标准做法。通过简单的DOM操作和事件监听，开发者可以实现对音视频的播放、暂停、音量调节、进度跳转等控制功能。
1. 基本HTML5音视频标签结构
HTML5提供了audio和video标签用于嵌入媒体内容。
示例：
<audio id="myAudio" src="music.mp3" controls></audio> <video id="myVideo" width="640" height="360" src="movie.mp4" controls></video>
添加controls属性会显示浏览器默认的播放控件。若想完全由JS自定义控制界面，可去掉该属性。
立即学习“前端免费学习笔记（深入）”；
2. 使用JavaScript控制播放状态
通过获取元素对象，调用其内置方法实现控制。
-
播放：
document.getElementById('myVideo').play(); -
暂停：
document.getElementById('myAudio').pause(); -
设置音量（0.0 到 1.0）：
myVideo.volume = 0.5; -
静音切换：
myAudio.muted = !myAudio.muted; -
跳转播放进度（单位：秒）：
myVideo.currentTime = 30;
3. 监听音视频事件
JS可以监听播放过程中的各种状态变化，实现更智能的交互。
常用事件包括：
- play：开始播放时触发
- pause：暂停时触发
- timeupdate：播放时间更新时频繁触发（可用于更新进度条）
- ended：播放结束时触发
- loadedmetadata：元数据加载完成后触发（可获取视频时长）
示例：监听播放结束并自动播放下一首
myAudio.addEventListener('ended', function() {
alert('播放完毕！');
// 可在此加载下一个音频文件
});
4. 自定义播放进度条
结合currentTime和duration，可创建自定义进度条。
示例代码：
const video = document.getElementById('myVideo');
const progressBar = document.getElementById('progress');
<p>video.addEventListener('timeupdate', () => {
const percent = (video.currentTime / video.duration) * 100;
progressBar.value = percent;
});</p><p>// 点击进度条跳转
progressBar.addEventListener('change', () => {
const time = (progressBar.value / 100) * video.duration;
video.currentTime = time;
});
基本上就这些核心操作。掌握这些方法后，你可以构建出功能完整的音视频播放器界面，配合CSS样式美化，实现媲美主流平台的播放体验。注意部分行为（如自动播放）可能受浏览器策略限制，需用户交互后才能触发。
