JavaScript video,audio
概述 #
<video>
元素用来加载视频,是HTMLVideoElement
对象的实例。<audio>
元素用来加载音频,是HTMLAudioElement
对象的实例。而HTMLVideoElement
和HTMLAudioElement
都继承了HTMLMediaElement
,所以这两个 HTML 元素有许多共同的属性和方法,可以放在一起介绍。
理论上,这两个 HTML 元素直接用src
属性指定媒体文件,就可以使用了。
<audio src="background_music.mp3"/>
<video src="news.mov" width=320 height=240/>
注意,<video>
元素有width
属性和height
属性,可以指定宽和高。<audio>
元素没有这两个属性,因为它的播放器外形是浏览器给定的,不能指定。
实际上,不同的浏览器支持不同的媒体格式,我们不得不用<source>
元素指定同一个媒体文件的不同格式。
<audio id="music">
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type='audio/ogg; codec="vorbis"'>
</audio>
浏览器遇到支持的格式,就会忽略后面的格式。
这两个元素都有一个controls
属性,只有打开这个属性,才会显示控制条。注意,<audio>
元素如果不打开controls
属性,根本不会显示,而是直接在背景播放。
HTMLMediaElement 接口 #
HTMLMediaElement
并没有对应的 HTML 元素,而是作为<video>
和<audio>
的基类,定义一些它们共同的属性和方法。
HTMLMediaElement
接口有以下属性。
- HTMLMediaElement.audioTracks:返回一个类似数组的对象,表示媒体文件包含的音轨。
- HTMLMediaElement.autoplay:布尔值,表示媒体文件是否自动播放,对应 HTML 属性
autoplay
。 - HTMLMediaElement.buffered:返回一个 TimeRanges 对象,表示浏览器缓冲的内容。该对象的
length
属性返回缓存里面有多少段内容,start(rangeId)
方法返回指定的某段内容(从0开始)开始的时间点,end()
返回指定的某段内容结束的时间点。该属性只读。 - HTMLMediaElement.controls:布尔值,表示是否显示媒体文件的控制栏,对应 HTML 属性
controls
。 - HTMLMediaElement.controlsList:返回一个类似数组的对象,表示是否显示控制栏的某些控件。该对象包含三个可能的值:
nodownload
、nofullscreen
和noremoteplayback
。该属性只读。 - HTMLMediaElement.crossOrigin:字符串,表示跨域请求时是否附带用户信息(比如 Cookie),对应 HTML 属性
crossorigin
。该属性只有两个可能的值:anonymous
和use-credentials
。 - HTMLMediaElement.currentSrc:字符串,表示当前正在播放的媒体文件的绝对路径。该属性只读。
- HTMLMediaElement.currentTime:浮点数,表示当前播放的时间点。
- HTMLMediaElement.defaultMuted:布尔值,表示默认是否关闭音量,对应 HTML 属性
muted
。 - HTMLMediaElement.defaultPlaybackRate:浮点数,表示默认的播放速率,默认是1.0。
- HTMLMediaElement.disableRemotePlayback:布尔值,是否允许远程回放,即远程回放的时候是否会有工具栏。
- HTMLMediaElement.duration:浮点数,表示媒体文件的时间长度(单位秒)。如果当前没有媒体文件,该属性返回0。该属性只读。
- HTMLMediaElement.ended:布尔值,表示当前媒体文件是否已经播放结束。该属性只读。
- HTMLMediaElement.error:返回最近一次报错的错误对象,如果没有报错,返回
null
。 - HTMLMediaElement.loop:布尔值,表示媒体文件是否会循环播放,对应 HTML 属性
loop
。 - HTMLMediaElement.muted:布尔值,表示音量是否关闭。
- HTMLMediaElement.networkState:当前网络状态,共有四个可能的值。0表示没有数据;1表示媒体元素处在激活状态,但是还没开始下载;2表示下载中;3表示没有找到媒体文件。
- HTMLMediaElement.paused:布尔值,表示媒体文件是否处在暂停状态。该属性只读。
- HTMLMediaElement.playbackRate:浮点数,表示媒体文件的播放速度,1.0是正常速度。如果是负数,表示向后播放。
- HTMLMediaElement.played:返回一个 TimeRanges 对象,表示播放的媒体内容。该属性只读。
- HTMLMediaElement.preload:字符串,表示应该预加载哪些内容,可能的值为
none
、metadata
和auto
。 - HTMLMediaElement.readyState:整数,表示媒体文件的准备状态,可能的值为0(没有任何数据)、1(已获取元数据)、2(可播放当前帧,但不足以播放多个帧)、3(可以播放多帧,至少为两帧)、4(可以流畅播放)。该属性只读。
- HTMLMediaElement.seekable:返回一个 TimeRanges 对象,表示一个用户可以搜索的媒体内容范围。该属性只读。
- HTMLMediaElement.seeking:布尔值,表示媒体文件是否正在寻找新位置。该属性只读。
- HTMLMediaElement.src:字符串,表示媒体文件所在的 URL,对应 HTML 属性
src
。 - HTMLMediaElement.srcObject:返回
src
属性对应的媒体文件资源,可能是MediaStream
、MediaSource
、Blob
或File
对象。直接指定这个属性,就可以播放媒体文件。 - HTMLMediaElement.textTracks:返回一个类似数组的对象,包含所有文本轨道。该属性只读。
- HTMLMediaElement.videoTracks:返回一个类似数组的对象,包含多有视频轨道。该属性只读。
- HTMLMediaElement.volume:浮点数,表示音量。0.0 表示静音,1.0 表示最大音量。
HTMLMediaElement
接口有如下方法。
- HTMLMediaElement.addTextTrack():添加文本轨道(比如字幕)到媒体文件。
- HTMLMediaElement.captureStream():返回一个 MediaStream 对象,用来捕获当前媒体文件的流内容。
- HTMLMediaElement.canPlayType():该方法接受一个 MIME 字符串作为参数,用来判断这种类型的媒体文件是否可以播放。该方法返回一个字符串,有三种可能的值,
probably
表示似乎可播放,maybe
表示无法在不播放的情况下判断是否可播放,空字符串表示无法播放。 - HTMLMediaElement.fastSeek():该方法接受一个浮点数作为参数,表示指定的时间(单位秒)。该方法将媒体文件移动到指定时间。
- HTMLMediaElement.load():重新加载媒体文件。
- HTMLMediaElement.pause():暂停播放。该方法没有返回值。
- HTMLMediaElement.play():开始播放。该方法返回一个 Promise 对象。
下面是play()
方法的一个例子。
var myVideo = document.getElementById('myVideoElement');
myVideo
.play()
.then(() => {
console.log('playing');
})
.catch((error) => {
console.log(error);
});
HTMLVideoElement 接口 #
HTMLVideoElement
接口代表了<video>
元素。这个接口继承了HTMLMediaElement
接口,并且有一些自己的属性和方法。
HTMLVideoElement 接口的属性。
- HTMLVideoElement.height:字符串,表示视频播放区域的高度(单位像素),对应 HTML 属性
height
。 - HTMLVideoElement.width:字符串,表示视频播放区域的宽度(单位像素),对应 HTML 属性
width
。 - HTMLVideoElement.videoHeight:该属性只读,返回一个整数,表示视频文件自身的高度(单位像素)。
- HTMLVideoElement.videoWidth:该属性只读,返回一个整数,表示视频文件自身的宽度(单位像素)。
- HTMLVideoElement.poster:字符串,表示一个图像文件的 URL,用来在无法获取视频文件时替代显示,对应 HTML 属性
poster
。
HTMLVideoElement 接口的方法。
- HTMLVideoElement.getVideoPlaybackQuality():返回一个对象,包含了当前视频回放的一些数据。
HTMLAudioElement 接口 #
HTMLAudioElement
接口代表了<audio>
元素。
该接口继承了HTMLMediaElement
,但是没有定义自己的属性和方法。浏览器原生提供一个Audio()
构造函数,返回的就是HTMLAudioElement
实例。
var song = new Audio([URLString]);
Audio()
构造函数接受一个字符串作为参数,表示媒体文件的 URL。如果省略这个参数,可以稍后通过src
属性指定。
生成HTMLAudioElement
实例以后,不用插入 DOM,可以直接用play()
方法在背景播放。
var a = new Audio();
if (a.canPlayType('audio/wav')) {
a.src = 'soundeffect.wav';
a.play();
}
事件 #
<video>
和<audio>
元素有以下事件。
- loadstart:开始加载媒体文件时触发。
- progress:媒体文件加载过程中触发,大概是每秒触发2到8次。
- loadedmetadata:媒体文件元数据加载成功时触发。
- loadeddata:当前播放位置加载成功后触发。
- canplay:已经加载了足够的数据,可以开始播放时触发,后面可能还会请求数据。
- canplaythrough:已经加载了足够的数据,可以一直播放时触发,后面不需要继续请求数据。
- suspend:已经缓冲了足够的数据,暂时停止下载时触发。
- stalled:尝试加载数据,但是没有数据返回时触发。
- play:调用
play()
方法时或自动播放启动时触发。如果已经加载了足够的数据,这个事件后面会紧跟playing
事件,否则会触发waiting
事件。 - waiting:由于没有足够的缓存数据,无法播放或播放停止时触发。一旦缓冲数据足够开始播放,后面就会紧跟
playing
事件。 - playing:媒体开始播放时触发。
- timeupdate:
currentTime
属性变化时触发,每秒可能触发4到60次。 - pause:调用
pause()
方法、播放暂停时触发。 - seeking:脚本或者用户要求播放某个没有缓冲的位置,播放停止开始加载数据时触发。此时,
seeking
属性返回true
。 - seeked:
seeking
属性变回false
时触发。 - ended:媒体文件播放完毕时触发。
- durationchange:
duration
属性变化时触发。 - volumechange:音量变化时触发。
- ratechange:播放速度或默认的播放速度变化时触发。
- abort:停止加载媒体文件时触发,通常是用户主动要求停止下载。
- error:网络或其他原因导致媒体文件无法加载时触发。
- emptied:由于
error
或abort
事件导致networkState
属性变成无法获取数据时触发。