JavaScript通过操作元素DOM接口控制音视频，核心是属性（paused、currentTime等）、方法（play()返回Promise）和事件（timeupdate、ended等），需注意加载状态与用户手势限制。
JavaScript 主要通过操作 <audio></audio> 和 <video></video> 元素的 DOM 接口来控制音视频播放、暂停、音量、时间、全屏等行为，核心是利用其内置的属性、方法和事件。
先用 document.querySelector 或 getElementById 获取元素，再读取关键属性判断当前状态：
paused：布尔值，true 表示已暂停（含未开始）ended：布尔值，true 表示已自然播放完毕currentTime：当前播放时间（秒），可读可写（跳转用）duration：总时长（秒），加载完成前为 NaN
volume：音量（0.0–1.0），设为 0 即静音muted：布尔值，直接静音/取消静音（绕过 volume）调用方法需注意浏览器策略和加载状态：
play()：返回 Promise，失败时会 reject（如用户未交互就自动播放）pause()：无返回值，随时可调用load()：重载资源，常用于更换 src 后重新准备currentTime 前建议监听 loadedmetadata 事件，确保元数据就绪绑定事件能及时响应播放过程变化：
立即学习“Java免费学习笔记（深入）”；
play：开始播放（包括恢复暂停）pause：明确被暂停timeupdate：播放中高频触发（约每 250ms），适合更新进度条ended：播放自然结束error：加载或解码失败（检查 error.code 和 error.message）canplay 或 canplaythrough：表示可开始播放或可连续播放部分能力需配合其他 API 使用：
requestVideoFrameCallback 或 canvas.getContext('2d').drawImage(video, ...) 实时抓帧video.videoTracks 和 audio.audioTracks 列表切换音视频轨道element.requestFullscreen() 进入全屏（需用户手势触发）MediaSession API 设置播放信息、控制通知栏媒体按钮（需 HTTPS）基本上就这些。掌握属性读写、Promise 化的 play、关键事件时机，就能覆盖大多数音视频交互需求。
以上就是JavaScript如何操作音视频媒体元素？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
743
收藏
取消收藏
