当前位置：首页 > news >正文

音视频元素

news 来源：原创 2025/4/25 1:50:39

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()：快速跳转到指定的时间点。