video/audio 音频/视频 标签详解

video

• <video> 标签定义视频，比如电影片段或其他视频流。
• 可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
• 目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
• HTMLVideoElement 和 HTMLAudioElement 标签都继承于 HTMLMediaElement。

<video src="movie.mp4" type="video/mp4"></video>
<video src="movie.webm" type="video/webm"></video>
<video src="movie.ogg" type="video/ogg">
	您的浏览器不支持video标签。
</video>
<!--继承树-->
HTMLVideoElement->HTMLMediaElement->HTMLElement->Element->Node->EventTarget->Object
HTMLAudioElement->HTMLMediaElement->HTMLElement->Element->Node->EventTarget->Object

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。用于解码器的选择。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择（如果都支持则任选一个）。

<video controls>
	<source src="horse.ogg" type="video/ogg">
	<source src="horse.mp3" type="video/mp4">
	Your browser does not support the video element.
</video> 

<track> 标签为诸如 video /audio 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

属性	值	描述
src	URL	必需的。规定轨道文件的 URL。
label	text	规定文本轨道的标签和标题。
default	default	规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
kind	captions / chapters / descriptions / metadata / subtitles	规定文本轨道的文本类型。
srclang	language_code	规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”，则该属性是必需的。

kind属性的值：

• captions，表示该轨道定义将在播放器中显示的简短说明。
• chapters，表示该轨道定义章节，用于导航媒介资源。
• descriptions，表示该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。
• metadata，指该轨道定义脚本使用的内容。
• subtitles，该轨道定义字幕，用于在视频中显示字幕。

<video width="320" height="240" controls="controls">
	<source src="forrest_gump.mp4" type="video/mp4" />
	<source src="forrest_gump.ogg" type="video/ogg" />
	<!--加入中文字幕-->
	<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
	<!--加入英文字幕-->
	<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

<video>的属性值：

属性	值	描述
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。

<video>的 script 方法：

方法名称	方法描述
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频
load()	重新加载音频/视频元素
canPlayType()	判断浏览器是否能播放指定的音频/视频类型。

canPlayType() 有以下三个返回值：

• 返回 probably，表示浏览器最可能支持该音频/视频类型；
• 返回 maybe，表示浏览器也许支持该音频/视频类型；
• 返回 “”（空字符串），表示浏览器不支持该音频/视频类型；

<video>的 script 属性：

属性名称	属性描述
videoWidth	视频宽度
videoHeight	视频高度
currentSrc	返回当前音频/视频的 URL
volume	设置或返回音频/视频的音量
autoplay	设置或返回是否在加载完成后随即播放音频/视频
paused	设置或返回音频/视频是否暂停
duration	返回当前音频/视频的长度（以秒计）
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
muted	设置或返回音频/视频是否静音
preload	设置或返回音频/视频是否应该在页面加载后进行加载
played	返回表示音频/视频已播放部分的 TimeRanges 对象
playbackRate	设置或返回音频/视频播放的速度
loop	设置或返回音频/视频是否应在结束时重新播放
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的 MediaError 对象
seeking	返回用户是否正在音频/视频中进行查找

<video>的 script 事件：

事件名称	事件描述
loadstart	当浏览器开始查找音频/视频时触发。
durationchange	当音频/视频的时长已更改时触发。
loadeddata	当浏览器已加载音频/视频的当前帧时触发。
progress	当浏览器正在下载音频/视频时
canplay	当浏览器可以开始播放音频/视频时触发。
loadedmetadata	当浏览器已加载音频/视频的元数据时触发。
play	当音频/视频已开始或不再暂停时
pause	当音频/视频已暂停时
error	当在音频/视频加载期间发生错误时
ended	当目前的播放列表已结束时
abort	当音频/视频的加载已放弃时
emptied	当目前的播放列表为空时
waiting	当视频由于需要缓冲下一帧而停止
ratechange	当音频/视频的播放速度已更改时触发。
seeked	当用户已移动/跳跃到音频/视频中的新位置时触发。
timeupdate	当目前的播放位置已更改时触发。
volumechange	当音量已更改时触发。

audio

<audio>标签定义声音，比如音乐或其他音频流。

<audio>的 script 属性：

属性	描述
src	设置或返回音频的 src 属性的值。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
paused	设置或返回音频是否暂停。
muted	设置或返回是否关闭声音。
defaultMuted	设置或返回音频默认是否静音。
ended	返回音频的播放是否已结束。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
volume	设置或返回音频的音量。
currentSrc	返回当前音频的 URL。
duration	返回音频的长度（以秒计）。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
readyState	返回音频当前的就绪状态。
preload	设置或返回音频的 preload 属性的值。
playbackRate	设置或返回音频播放的速度。
defaultPlaybackRate	设置或返回音频的默认播放速度。
loop	设置或返回音频是否应在结束时再次播放。
mediaGroup	设置或返回音频所属媒介组合的名称。
networkState	返回音频的当前网络状态。
seeking	返回用户当前是否正在音频中进行查找。
played	返回表示音频已播放部分的 TimeRanges 对象。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
error	返回表示音频错误状态的 MediaError 对象。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
crossOrigin	设置或返回音频的 CORS 设置。

<audio>的 script 方法：

属性	描述
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。

<audio>的 script 事件：

属性	描述
play	播放事件，可判断歌曲是否正在播放中
pause	暂停事件，判断歌曲是否暂停

另外，loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（这些事件在加载过程中是按以上顺序触发的）。
以上这些事件可以通过事件监听对其做相应处理。