JavaScript操作音视频的核心是通过audio/video元素DOM接口实现自定义播放器：隐藏原生控件，用play()/pause()控制播放，volume/muted调节音量，currentTime/duration控制进度，playbackRate调整速率，并监听play、pause、timeupdate、loadedmetadata、ended、error等事件同步UI状态；进度条需在loadedmetadata后启用，通过input事件拖动和timeupdate事件实时更新，确保双向同步。
JavaScript 操作音视频的核心是通过 <audio> 和 <video> 元素的 DOM 接口，结合事件监听与属性控制实现自定义播放器。关键在于隐藏原生控件、手动绑定 UI 按钮行为，并实时同步状态。
获取并控制媒体元素
先用 document.querySelector 获取音视频元素，禁用原生控件（controls="false"），再通过其属性和方法进行操作：
-
播放/暂停：调用
play()或pause()方法；注意自动播放策略（如需静音自动播，加muted属性） -
音量与静音：设置
volume（0–1）或切换muted布尔值 -
播放进度：读写
currentTime（单位：秒），配合duration可计算进度百分比 -
播放速率：修改
playbackRate（如 0.5、1、1.5）
监听关键事件同步 UI 状态
媒体元素会触发多种事件，用于更新自定义按钮图标、进度条、时间显示等：
-
play/pause：切换“播放”/“暂停”按钮样式 -
timeupdate：实时更新当前时间、进度条位置（建议节流，避免频繁重绘） -
loadedmetadata：获取duration后初始化总时长显示和进度条最大值 -
ended：播放结束时重置按钮或自动跳转 -
error：捕获加载失败，提示用户或尝试备用资源
实现可拖拽进度条
用 <input type="range"> 或自定义 div 模拟滑块，关键是双向同步：
立即学习“Java免费学习笔记（深入）”；
- 拖动时：监听
input或change事件，将滑块值换算为currentTime = (value / max) * duration - 播放时：在
timeupdate中动态更新滑块value，保持视觉一致 - 注意处理
duration未就绪的情况（初始为NaN），需等loadedmetadata后再启用进度条
封装基础控制逻辑（示例片段）
以下为简化但可用的控制逻辑结构：
const media = document.querySelector('video');
const playBtn = document.getElementById('play-btn');
const timeline = document.getElementById('timeline');
<p>playBtn.addEventListener('click', () => {
if (media.paused) media.play().catch(e => console.warn('Play failed:', e));
else media.pause();
});</p><p>media.addEventListener('play', () => playBtn.textContent = '⏸');
media.addEventListener('pause', () => playBtn.textContent = '▶');</p><p>media.addEventListener('loadedmetadata', () => {
timeline.max = media.duration;
});</p><p>media.addEventListener('timeupdate', () => {
timeline.value = media.currentTime;
});</p><p>timeline.addEventListener('input', () => {
media.currentTime = timeline.value;
});</p> 
