js基础-Video/Audio

最新推荐文章于 2025-08-06 14:59:59 发布

front_end_fan

最新推荐文章于 2025-08-06 14:59:59 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript html5 多媒体视频音频

本文链接：https://blog.youkuaiyun.com/qq_39198420/article/details/78059333

javascript 专栏收录该内容

74 篇文章

订阅专栏

本文详细介绍了HTML5中<audio>和<video>元素的使用方法，包括如何在网页中嵌入音频和视频文件，以及如何利用JavaScript进行更高级的操作。此外，还列举了这些元素支持的各种属性和事件。

多媒体（video和audio）

一、音频（audio）和视频（video）

在HTML5中引入了<audio>和<video>元素，用来在HTML文档中嵌入音频和视频：

<audio src="m.mp3"/> 

<video src="m.mp4" width=320 height=400 />

由于不同的浏览器对标准音频和视频的编解码支持上并不一致，所以通常需要使用<source>元素来为指定不同格式的媒体源：

<audio id="music"> 

  <source src="m.mp3" type="audio/mpeg"> 

  <source src="m.ogg" type="audio/ogg;codec='vorbis'"> 

</audio>

<source>元素没有任何内容：没有闭合的</source>标签，也需要使用“/>”来结束它们。

我们可以在<audio>和</audio>（或<video>和</video>）标签之间插入文本内容，如果浏览器支持<audio>和<video>元素，将不会渲染文本内容；而如果浏览器不支持时，则会将它们渲染出来。

<audio id="music"> 

  <source src="m.mp3" type="audio/mpeg"> 

  <source src="m.ogg" type="audio/ogg;codec='vorbis'"> 

  您的浏览器不支持audio标签。 

</audio>

1.1 HTML中媒体的属性

（1）视频（<video>）

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放。 

controls    controls    如果出现该属性，则向用户显示控件，比如播放按钮。 

height      pixels      设置视频播放器的高度。 

width       pixels      设置视频播放器的宽度。 

loop        loop        如果出现该属性，则循环播放。 

muted       muted       如果出现该属性，视频的音频输出为静音。 

poster      URL         规定视频正在下载时显示的图像，直到用户点击播放按钮。 preload     auto/metadata/none   如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 

src         URL         要播放的视频的 URL。

（2）音频（<audio>）

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放。 

controls    controls    如果出现该属性，则向用户显示控件，比如播放按钮。 

loop        loop        如果出现该属性，则当媒介文件完成播放后再次开始播放。 

muted       muted       如果出现该属性，视频的音频输出为静音。 

preload     auto/metadata/none    如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 

src         URL         要播放的视频的 URL。

1.2 用JavaScript操作音频和视频

audio可以通过new创建Audio对象

var music = new Audio('m.mp3');

还可以通过标签获取<audio>或<video>元素，即获得HTMLVideoElement和HTMLAudioElement对象：

var music = document.getElementById('music');

检测浏览器是否支持

var hasAudio = !!(music.canPlayType); //通过!!运算符将结果转换成布尔值

（1）属性

只读属性：

duration   整个媒体文件的播放时长，以秒为单位。如果无法获取时长，则返回NaN 

paused     如果媒体文件当前被暂停，则返回true。如果还未开始播放，默认返回true 

ended      如果媒体文件已经播放完毕，则返回true 

startTime  返回最早的播放起始时间，一般是0.0，除非是缓冲过的媒体文件，并且一部分内容已经不在缓冲区 

error      在发生了错误的情况下返回的错误代码 

currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件 

seeking    如果播放器正在跳到一个新的播放点，那seeking的值为true。 

initialTime  指定了媒体的开始时间，单位为秒

可读写属性：

autoplay     将媒体文件设置为创建后自动播放，或者查询是否已设置为autoplay 

loop         返回是否循环播放，或设置循环播放（或者不循环播放） 

currentTime  指定了播放器应该跳过播放的时间（单位为秒）。在播放过程中，可设置currentTime属性来进行定点播放。 

controls     显示或隐藏用户控制界面，或者查询用户控制界面当前是否可见 

volume       在0.0到1.0之间设置音频音量的相对值，或者查询当前音量相对值 

muted        布尔值，设置静音或者消除静音，或者检测当前是否为静音 

autobuffer   通知播放器在媒体文件开始播放前，是否惊醒缓冲加载。如果已设置为autoplay，则忽略此特性 

playbackRate  用于指定媒体播放的速度。1.0表示正常速度，大于1则表示“快进”，0~1之间表示“慢放”，负值表示回放。

三个特殊属性：

played 返回已经播放的时间段 

buffered 返回当前已经缓冲的时间段 

seekable 返回当前播放器需要跳到的时间段 

played、buffered和seekable都是TimeRanges对象，每个对象都有一个length属性以及start(index)和end(index)方法，前者表示当前一个时间段，后者分别返回当前时间段的起始时间点和结束时间点（单位为秒）。

还有另外三个属性：

readyState、networkState和error，它们包含<audio>和<video>元素的一些状态细节。每个属性都是数字类型的，而且为每个有效值都定义了对应的常量。

readyStete属性

readyState属性指定当前已经加载了多少媒体内容，只读属性

HAVE_NOTHING（数字值为0）：没有获取到媒体的任何信息，当前播放位置没有可播放数据。 

HAVE_METADATA（数字值为1）：已经获取到足够的媒体数据，但是当前播放位置没有有效的媒体数据（也就是说，获取到的媒体数据无效，不能播放）。 

HAVE_CURRENT_DATA（数字值为2）：当前播放位置已经有数据可以播放，但没有获致到可以让播放器前进的数据。当媒体为视频时，意思是当前帖的数据已获取，但没有获取到下一帧的数据，或者当前帧已经是播放的最重一帧。 

HAVE_FUTURE_DATA（数字值为3）：当前播放位置已经有数据可以播放，而且也获取到了可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获取，而且也获取到了下刺目贩数据，当前帧是播放的最后一帧时，readyState属性不可能为HAVE_FUTURE_DTAT。  HAVE_ENOUGH)DATA（数字值为4）：当前播放位置已经有数据可以播放，同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体以某一种速度进行加载，可以保证有足够的后续数据进行播放。

networkState属性

networkState属性读取当前的网络状态，共有如下所示的4个可能值：

NETWORK_EMPTY（数字值为0）：元素牌初始状态。
NETWORK_IDLE（数字值为1）：浏览器已选择好用什么编码格式来播放媒体，但尚未建立网络连接。
NETWORK_LOADING（数字值为2）：媒体数据加载中。
NETWORK_NO_SOURCE（数字值为3）：没有支持的编码格式，不执行加载。

error属性

当在加载媒体或者播放媒体过程中发生错误时，浏览器就会设置或元素的error属性。在没有错误发生时，error属性值为null。反之，error的属性是一个对象，包含了描述错误的数值code属性，error.code可能的值：

MEDIA_ERR_ABORTED(数字值为1）：媒体数据的下载过程由于用户的操作原因而被中止。
MEDIA_ERR_NETWORK(数字值为2）：确认媒体资源可用，但是在下载时出现网络错误，媒体数据下载过程被中止。
MEDIA_ERR_DECODE(数字值为3)：确认媒体资源可能，但是解码时发生错误。
MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：媒体格式不被支持。

video的额外属性：

poster 在视频加载完成之前，代表视频内容的图片的URL地址。该特性可读可修改 

width、height  读取或设置显示尺寸。如果大小不匹配视频本身，会导致边缘出现黑色条状区域 

videoWidth、videoHeight  返回视频的固有或自使用宽度和高度。只读

（2）方法

canPlayType(type)方法将媒体的MIME类型作为参数，用来测试浏览器是否支持指定的媒体类型。如果它不能播放该类型的媒体文件，将返回一个空的字符串；反之，它会返回一个字符串：“maybe”或“probably”。

var a = new Audio(); 

if(a.canPlayType('audio/wav')){ 

  a.src = 'm.wav'; 

  a.play(); 

}

其他方法：

play() 控制媒体开始播放
pause() 暂停媒体播放
load() 重新加载src指定的资源

（3）事件

audio元素和video元素加载音频和视频时，以下事件按次序发生。

loadstart：开始加载音频和视频。 

durationchange：音频和视频的duration属性（时长）发生变化时触发，即已经知道媒体文件的长度。如果没有指定音频和视频文件，duration属性等于NaN。如果播放流媒体文件，没有明确的结束时间，duration属性等于Inf（Infinity）。 

loadedmetadata：媒体文件的元数据加载完毕时触发，元数据包括duration（时长）、dimensions（大小，视频独有）和文字轨。 

loadeddata：媒体文件的第一帧加载完毕时触发，此时整个文件还没有加载完。 

progress：浏览器正在下载媒体文件，周期性触发。下载信息保存在元素的buffered属性中。 

canplay：浏览器准备好播放，即使只有几帧，readyState属性变为CAN_PLAY。 

canplaythrough：浏览器认为可以不缓冲（buffering）播放时触发，即当前下载速度保持不低于播放速度，readyState属性变为CAN_PLAY_THROUGH。

除了上面这些事件，audio元素和video元素还支持以下事件。

abort    播放中断 

emptied 媒体文件加载后又被清空，比如加载后又调用load方法重新加载。 

ended   播放结束 

error    发生错误。该元素的error属性包含更多信息。 

pause   播放暂停 

play    暂停后重新开始播放 

playing 开始播放，包括第一次播放、暂停后播放、结束后重新播放。 

ratechange  播放速率改变 

seeked  搜索操作结束 

seeking 搜索操作开始 

stalled 浏览器开始尝试读取媒体文件，但是没有如预期那样获取数据 

suspend 加载文件停止，有可能是播放结束，也有可能是其他原因的暂停 

timeupdate  网页元素的currentTime属性改变时触发。 

volumechange    音量改变时触发（包括静音）。 

waiting 由于另一个操作（比如搜索）还没有结束，导致当前操作（比如播放）不得不等待。