17370845950

JavaScript操作音视频的核心是通过audio/video元素DOM接口实现自定义播放器：隐藏原生控件，用play()/pause()控制播放，volume/muted调节音量，currentTime/duration控制进度，playbackRate调整速率，并监听play、pause、timeupdate、loadedmetadata、ended、error等事件同步UI状态；进度条需在loadedmetadata后启用，通过input事件拖动和timeupdate事件实时更新，确保双向同步。

JavaScript 操作音视频的核心是通过 和 元素的 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：捕获加载失败，提示用户或尝试备用资源

实现可拖拽进度条

用 或自定义 div 模拟滑块，关键是双向同步：

• 拖动时：监听 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');
playBtn.addEventListener('click', () => {
if (media.paused) media.play().catch(e => console.warn('Play failed:', e));
else media.pause();
});
media.addEventListener('play', () => playBtn.textContent = '⏸');
media.addEventListener('pause', () => playBtn.textContent = '▶');
media.addEventListener('loadedmetadata', () => {
timeline.max = media.duration;
});
media.addEventListener('timeupdate', () => {
timeline.value = media.currentTime;
});
timeline.addEventListener('input', () => {
media.currentTime = timeline.value;
});