牛骨文教育服务平台(让学习变的简单)

多媒体(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	由于另一个操作(比如搜索)还没有结束,导致当前操作(比如播放)不得不等待。