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可以监听播放过程中的各种状态变化，实现更智能的交互。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

常用事件包括：

• 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样式美化，实现媲美主流平台的播放体验。注意部分行为（如自动播放）可能受浏览器策略限制，需用户交互后才能触发。