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标签用于嵌入媒体内容。
示例：
添加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');video.addEventListener('timeupdate', () => {const percent = (video.currentTime / video.duration) * 100;progressBar.value = percent;});
// 点击进度条跳转progressBar.addEventListener('change', () => {const time = (progressBar.value / 100) * video.duration;video.currentTime = time;});
基本上就这些核心操作。掌握这些方法后，你可以构建出功能完整的音视频播放器界面，配合CSS样式美化，实现媲美主流平台的播放体验。注意部分行为（如自动播放）可能受浏览器策略限制，需用户交互后才能触发。
以上就是JS音频视频怎么控制_JS HTML5音视频播放与JS控制方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537563.html
微信扫一扫 
支付宝扫一扫 
