javascript如何操作音视频_相关API有哪些基础用法【教程】

JavaScript操作音视频的核心是理解HTMLMediaElement基类及其事件、属性和方法；所有和元素均继承自它，90%需求由此解决。

JavaScript 操作音视频的核心不是靠“教程式记忆”，而是理解 HTMLMediaElement 这个基类，以及围绕它的事件、属性和方法。所有 和 元素都继承自它，90% 的日常需求靠它就能解决。

如何控制播放/暂停/跳转？用 play()、pause()、currentTime

这是最常触发的交互。注意：现代浏览器对自

• element.play() 返回 Promise，需处理失败情况：

  button.addEventListener('click', () => {
    video.play().catch(e => console.warn('播放被阻止:', e.name));
  });

• element.pause() 无返回值，可随时调用
• element.currentTime = 30 直接跳到第 30 秒；读取时是浮点数（单位：秒），精度取决于媒体容器和浏览器
• 设置 currentTime 后不会立即生效，要监听 seeking（开始跳转）和 seeked（跳转完成）事件

怎么监听加载和播放状态？关键事件有 canplay、loadeddata、timeupdate

别依赖 load 或 readyState === 4 来判断是否能播——它们太早或太晚。实际开发中这几个事件更可靠：

• canplay：浏览器已获取足够数据，可以开始播放（但可能卡顿）。适合启用播放按钮
• loadeddata：第一帧图像/音频已解码完成。适合做封面图隐藏、初始化进度条
• timeupdate：播放位置变化时频繁触发（通常每 200–250ms 一次）。用来更新进度条 UI，但别在里面做重计算
• 错误监听必须加 error 事件，video.error 是 MediaError 对象，code 字段告诉你具体问题（如 MediaError.MEDIA_ERR_NETWORK）

volume、muted、playbackRate 怎么设才稳定？

这些属性看似简单，但受策略和硬件影响大：

• volume 是 0–1 的浮点数，设为 0 等价于静音，但不如直接设 muted = true 可靠（尤其在 iOS 上）
• muted 是布尔值，设为 true 会绕过大部分自动播放限制，且不触发 volumechange 事件
• playbackRate 默认是 1，可设为 0.5–2.0（部分浏览器支持更高，但非标准）。设完不一定立刻生效，需监听 ratechange 事件确认
• 某些设备（如 macOS Safari）会忽略 volume 设置，只响应系统音量；此时 muted 是唯一可控入口

为什么 duration 初始是 NaN？怎么拿到真实时长？

duration 在元数据未加载完成前就是 NaN，不是 bug。它依赖 loadedmetadata 事件：

• 监听 loadedmetadata 事件后读取 duration，此时值才可信
• |直播|流（如 HLS、DASH）的 duration 可能一直是 Infinity，因为没有终点
• 如果服务器没返回 Content-Length 或没开启 Accept-Ranges，duration 可能无法解析，video.duration 保持 NaN，这时只能靠服务端提供时长或估算

真正难的不是调用哪个 API，而是判断当前状态是否允许你调用它——比如用户没点过页面、视频还没加载元数据、网络突然中断。把状态机理清楚，比背 API 更重要。

# 这是  # 加载  # 尤其是  # 时长  # safari  # 音视频  # 跳转  # 还没  # 浏览器  # 设为  # mac  # ui  # Error  # 对象  # macos  # cos  # javascript  # java  # html  # 为什么  # 事件  # bug  # 继承  # ios  # promise  # Length  # 进度条  # 浮点数  # dash 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】