音视频元素

HTMLMediaElement

HTMLMediaElement 是 HTML5 中 和 元素的基类，定义了它们共享的属性、方法和事件。无论你使用的是音频还是视频元素，都可以通过 HTMLMediaElement 提供的功能来控制媒体的播放、加载、状态查询等操作。

经常用到的是HTMLMediaElement 的一些静态常量：

网络状态 (networkState)

这些常量用来表示媒体资源的加载状态。

• HTMLMediaElement.NETWORK_EMPTY (值为 0): 元素尚未初始化。
• HTMLMediaElement.NETWORK_IDLE (值为 1): 浏览器选择不下载媒体数据。
• HTMLMediaElement.NETWORK_LOADING (值为 2): 浏览器正在下载数据。
• HTMLMediaElement.NETWORK_NO_SOURCE (值为 3): 没有找到源。

就绪状态 (readyState)

该常量最常用，描述了媒体元素中可用的数据量，用来判断是否可以获取到长宽等元素据、或者是否可以获取首帧。（使用该常量时，需要将 video 元素的 preload 设置为 auto）

• HTMLMediaElement.HAVE_NOTHING (值为 0): 尚未获取任何数据。
• HTMLMediaElement.HAVE_METADATA (值为 1): 已获取足够的数据以确定媒体的时长和其他轨道信息，但不足以播放。
• HTMLMediaElement.HAVE_CURRENT_DATA (值为 2): 当前播放位置的数据是可用的，但不足以顺利播放接下来的内容。
• HTMLMediaElement.HAVE_FUTURE_DATA (值为 3): 当前播放位置的数据以及未来至少一帧的数据是可用的。
• HTMLMediaElement.HAVE_ENOUGH_DATA (值为 4): 媒体足以顺利播放而不会因为缺乏数据而中途停止。

错误代码 (error.code)

如果媒体加载或播放过程中遇到问题，可以通过 mediaElement.error 获取一个 MediaError 对象，并通过该对象的 code 属性了解具体的错误原因。

• MediaError.MEDIA_ERR_ABORTED (值为 1): 取消了媒体加载操作。
• MediaError.MEDIA_ERR_NETWORK (值为 2): 在媒体加载期间发生网络错误，导致加载被中断。
• MediaError.MEDIA_ERR_DECODE (值为 3): 媒体解码失败。
• MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED (值为 4): 不支持媒体资源的格式或 MIME 类型。

video

属性

• controls：显示视频播放控件（如播放/暂停按钮、音量控制等）。

• autoplay：页面加载完成后自动播放视频。

• loop：视频结束后从头开始播放。

• muted：静音播放视频。

• poster：指定一个图像的 URL，在视频数据不可用时显示。

• preload提示浏览器如何提前加载视频数据，可选值有 none（不预加载）、metadata（仅加载元数据）、auto（尽可能多地预加载）。

• src：视频文件的 URL。

• currentTime：获取或设置视频中的当前播放位置（秒）。

• duration：只读，返回视频的长度（秒），如果持续时间未知则返回NaN

• paused：只读，返回一个布尔值，表示视频是否处于暂停状态。

• volume：获取或设置音频音量，范围是 0.0 到 1.0。

• muted：获取或设置视频是否静音。

• readyState：是 HTML5  和  元素的一个属性，用于指示媒体资源的加载状态。它返回一个整数值，代表当前媒体元素处于哪一个加载阶段

  readyState的可能值：

  • 0 (HAVE_NOTHING)：
    • 尚未加载任何数据。1 (HAVE_METADATA)：
  • 1 (HAVE_METADATA)：
  • 已加载足够的数据以获取媒体的基本元数据（如时长、尺寸等），但不足以播放第一帧。
  • 2 (HAVE_CURRENT_DATA)：
  • 当前时间点的数据已经可用，因此可以查询例如宽度和高度等信息，但是没有足够的数据来播放整个视频流或音频流。
  • 3 (HAVE_FUTURE_DATA)：
    • 当前播放位置的数据以及未来至少一帧的数据已经可用，这意味着如果视频正在播放，它可以不中断地继续播放一段时间。
  • (HAVE_ENOUGH_DATA)：
    • 媒体资源足够完整，足以顺利播放而不会因为缺乏数据而中途停止。这并不意味着整个文件已经被下载完毕，而是有足够的数据确保平滑播放。

• defaultMuted：布尔值，指定视频在播放时是否默认静音。注意这与 muted 属性不同，后者用于动态控制当前是否静音。

• defaultPlaybackRate：获取或设置默认的播放速率。这个值是用户未手动更改播放速度时使用的速率，默认为 1.0。

• playbackRate：获取或设置当前的播放速率。例如，设置为 2.0 可以实现双倍速播放。

• played：返回一个 TimeRanges 对象，表示已经播放过的媒体片段范围。

• seekable：返回一个 TimeRanges 对象，表示可以跳转到的媒体片段范围（即已加载且可以播放的部分）。

• ended：只读属性，返回一个布尔值，指示视频是否因为播放完毕而停止。

• error：如果发生错误，则返回一个 MediaError 对象，提供有关错误的信息；如果没有错误则返回 null。

• networkState：只读属性，指示网络状态，可用于检测视频资源是否成功加载。可能的值包括：

  • NETWORK_EMPTY (0) - 元素尚未初始化。
  • NETWORK_IDLE (1) - 浏览器选择不下载媒体数据。
  • NETWORK_LOADING (2) - 浏览器正在下载数据。
  • NETWORK_NO_SOURCE (3) - 没有找到源。

• textTracks：返回一个 TextTrackList 对象，包含所有关联的文本轨道（如字幕或描述）。

方法

• play()：开始播放视频。
• pause()：暂停当前播放的视频。
• load()：重新加载视频元素，常用于动态改变后更新视频内容。
• canPlayType(type)：检查浏览器是否能播放指定类型的视频文件。参数为 MIME 类型字符串，返回"probably"、"maybe"或空字符串（不支持）。
• addTextTrack()：向媒体添加一个新的文本轨道（例如，用于字幕）。
• fastSeek()：快速跳转到指定的时间点。

事件

• play：当视频开始播放时触发。
• pause：当视频暂停时触发。
• ended：当视频播放结束时触发。
• timeupdate：当当前播放位置发生变化时触发。
• progress：当浏览器正在下载视频数据时周期性地触发。
• loadedmetadata：当浏览器已加载视频的元数据（如长度和尺寸）时触发。
  • 此时可获取 video元素的宽高的数据
• loadeddata：当浏览器已加载视频的当前帧时触发。
  • 此时可获取 video 元素的首帧
• volumechange：当音量改变时（包括静音状态改变）触发。
• error：当发生错误时触发，可以用来捕获视频加载失败等情况。
• waiting：当视频由于需要缓冲下一帧而暂停时触发。
• seeking：当用户开始拖动进度条寻找新的播放位置时触发。
• seeked：当用户完成拖动进度条并选择了新的播放位置时触发。
• ratechange：当播放速率发生变化时触发。
• suspend：当浏览器主动暂停下载媒体数据时触发。

audio

音频元素的属性、方法、事件，此处不再赘述，除了视频独有的一些属性、方法、事件，两者并无太多不同，因为两者均继承HTMLMediaElement。