H5音频和视频

1 使用H5音频和视频

1.1 使用<audio>

        audio标签可以播放声音文件或音频流，支持Ogg、Vorbis、MP3、Wav等音频格式

audio 标签常用属性

属性	值	说明
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用了autoplay则忽略该属性
src	url	要播放的音频URL

提示：如果浏览器不兼容，<audio src="url" control="control"> 如果不兼容的提示信息 </audio>

        <audio>标签可以包含多个<soruce>标签，用来导入不同的音频文件，浏览器会自动选择第一个可以识别的格式进行播放，<source>标签必须包裹在<audio><video>标签内，其属性为：

        media：定义媒体资源的类型

        src：定义媒体文件的url

        type：定义媒体资源的MIME类型，如果媒体类型如源文件不匹配，浏览器可能会拒绝播放。可以省略type属性，让浏览器自动检测编码方式。

        为了兼容不同浏览器，一般使用多个<source>标签包含多媒体资源，对于数据源，浏览器会按照比声明顺序进行选择，如果支持的不止一种，那么浏览器会优先播放位置靠前的媒体资源。数据源列表的排放顺序应按照用户体验由高到低，或服务器消耗由低到高列出。

1.2 使用<video>

        <video>标签可以播放视频文件或视频流，支持Ogg、MPEG4、WebM等视频格式

video 标签常用属性

属性	值	说明
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，如播放按钮
height	pixels	设置视频播放器高度
width	pixels	设置视频播放器宽度
loop	loop	如果出现该属性，则每当媒介文件结束时重新开始播放
muted	muted	设置视频的音频输出应该被静音
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用了autoplay则忽略该属性
poster	URL	设置视频下载时显示的图像，或在用户单击“播放”按钮前显示的图像
src	url	要播放的视频的URL

H5的<video>标签支持3中常用的视频格式简介如下：

        Ogg：带有Therora视频编码和Vorbis音频编码的Ogg文件

        MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件

        WebM：带有VP8视频编码和Vorbis音频编码的WebM文件

通过js方法控制媒体播放：

        load()：可以加载音频或者视频文件

        play()：可以加载并播放音频或视频文件，除非已经暂停，否则默认从开头播放

        pause()：暂停处于播放状态的音频或视频文件

        canPlayType( type )：检测video元素是否支持给定MIME类型的文件

1.3 设置属性（audio和video元素共有的js属性）

（1）autobuffer属性：

        可读写属性。使用该属性可以使得audio或video元素实现自动缓冲但并不播放，默认值为false。如果使用了autoplay属性，则autobuffer属性会被忽略

（2）autoplay属性：

        可读写属性。该属性可以实现页面加载后音频一旦就绪即开始自动播放。使用autoplay属性相比使用js控制音频或视频播放来得简便，其值也可以设置为true或false。

（3）buffered属性：

        只读属性，用于返回一个 TimeRanges 对象，确认浏览器已经缓存媒体文件

（4）controls属性：

        可读写属性。值为Boolean，可以为媒体文件提供用于播放的控制台，包含播放、暂停、定位、时间显示、音量控制、全屏切换等常用控件

（5）currentSrc属性：

        只读属性，无默认值。用于返回媒体数据的URL地址，如果媒体URL地址未指定，则返回一个空字符串

（6）currentTime属性：

        可读写属性，无默认值。用于获取或设置当前播放位置，返回值为时间，单位为秒

（7）defaultPlaybackRate属性：

        可读写属性，无默认值。用于获取或设置当前播放速率，前提是用户没有使用快进或快退控件

（8）duration属性：

        只读属性，无默认值。用于获取当前媒体的持续时间，返回值为时间，单位为秒

（9）ended属性：

        只读属性，无默认值。用于返回一个布尔值，以获悉媒体是否播放结束

（10）error属性：

        只读属性，无默认值。用于返回一个MediaError对象以表明当前的错误状态，如果没有出现错误，则返回null。错误状态共有4个可能值，分别为：

        MEDIA_ERR_ABORTED（数字值为1）：媒体资源获取异常——媒体数据的下载过程因用户操作而终止

        MEDIA_ERR_NETWORK（数字值为2）：网络错误——在媒体数据已经就绪时用户停止了媒体下载资源的过程

        MEDIA_ERR_DECODE（数字值为3）：媒体解码错误——在媒体数据已经就绪时解码过程中出现了错误

        MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：媒体格式不被支持

（11）initialTime属性：

        只读属性，无默认值，用于获取最早的可用于回放的位置，返回值为时间，单位为秒

（12）loop属性：

        可读写属性。用于获取或设置当媒体文件播放结束时是否再重新开始播放

（13）muted属性：

        可读写属性，无默认值。muted属性为布尔值，用于获取或设置当前媒体播放是否开启静音

（14）networkState属性：

        只读属性。用于返回媒体的网络状态，共有4个可能值：

        NETWORK_EMPTY（数字值为0）：元素尚未初始化

        NETWORK_IDLE（数字值为1）：加载完成，网络闲置

        NETWORK_LOADING（数字值为2）：媒体数据加载中

        NETWORK_NO_SOURCE（数字值为3）：因为不存在支持的编码格式，加载失败

（15）paused属性：

        只读属性，无默认值。用于返回一个布尔值，表示媒体是否暂停播放，true表示暂停，false表示正在播放

（16）playbackRate属性：

        可读写属性，无默认值。用于读取或设置媒体资源播放的当前速率

（17）played属性：

        只读属性，无默认值，用于返回一个TimeRanges对象，标明媒体资源在浏览器中已播放的时间范围。TimeRanges对象的length属性为已播放部分的时间段，该对象有两个方法，end方法用于返回已播放时间段的结束时间，start方法用于返回已播放时间段的开始时间

（18）preload属性：

        可读写属性，无默认值，用于定义视频是否预加载，属性值可为 none、metadata和auto。如果不用该属性，则默认auto

        none：不进行预加载，当页面制作人员认为用户不希望直接观看此视频，或者减少HTTP请求时可以设置该项

        metadata：部分预加载。代表页面制作者认为用户不期望直接观看此视频，但为用户提供一些元数据（包括尺寸、第一帧、曲目列表、持续时间等）

        auto：全部预加载

（19）readyState属性：

        只读属性，无默认值。用于返回媒体当前播放位置的就绪状态，可能值：

        HAVE_NOTHING（数字值为0）：当前播放位置没有有效的媒体资源

        HAVE_METADATA（数字值为1）：媒体资源确认存在且加载中，单当前位置没有能够加载到有效的媒体数据以进行播放

        HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放

        HAVE_FUTURE_DATA（数字值为3）：在当前位置已获取到后续播放媒体数据，可以进行播放

        HAVE_ENOUGH_DATA（数字值为4）：媒体数据可以进行播放，且浏览器确认媒体数据正以某一种速率进行加载并有足够的后续数据以继续进行播放，而不会是浏览器的播放速度赶上加载数据的末端

（20）seekable属性：

        只读属性，无默认值，用于返回一个TimeRanges对象，表明可以对当前媒体资源进行请求

（21）seeking属性：

        只读属性，无默认值，用于返回一个布尔值，表示浏览器是否正在请求某一播放位置的媒体数据，true表示浏览器正在请求数据，而false表示浏览器已经停止请求数据

（22）src属性：

        可读写属性，无默认值，用于指定媒体资源的URL地址，与<img>标签类似，可与poster属性连用。poster属性用于指定一张替换图片，如果当前媒体数据无效，则显示该图片

（23）volume属性：

        可读写属性，无默认值，用于获取或设置媒体资源的播放音量，范围为 0.0~1.0,0.0为静音，1.0为最大音量，音量大小并非线性变化，如果同时使用了muted属性，则此属性会被忽略

1.4 设置方法（audio 和 video 元素拥有相同的js方法）

（1）canPlayType()方法：

        用于返回一个字符串以表明客户端是否能够播放指定的媒体类型

var canPlay = media.canPlayType(type)；其中media指页面中得audio 或 video元素，参数type为客户端浏览器能够播放的媒体类型，该方法返回以下可能值：

        probably：表示浏览器确定支持此媒体类型

        maybe：表示浏览器肯呢个支持此媒体类型

        空字符串：表示浏览器不支持此媒体类型

（2）load()方法：

        用于重置媒体元素并重新载入媒体，不返回任何值，该方法可中止任何正在进行的任务或事件。元素的playbackRate属性值会被强行设置为 defaultPlaybackRate属性的值，而且元素的error值会被强行设置为null

（3）pause()方法：

        用于暂停媒体的播放，并将元素的paused属性的值强行设置为true

（4）play()方法：

        用于播放媒体，并将元素的paused属性的值强行设置为false

1.5 设置事件（audio和video元素支持H5的媒体事件）

        使用js可以捕捉这些事件并对其进行处理，处理这些事件一般有下面两种方式

（1）一种是使用addEventListener()方法监听，其用法如下：

        addEventListener( “事件类型”，处理函数，处理方式)

（2）另一种是直接赋值，即获取事件句柄的方法，例如：video.onplay = begin_playing，其中begin_playing为处理函数

事件	描述
abort	浏览器在完全加载媒体数据之前中止获取媒体数据
canplay	浏览器能够开始播放媒体数据，但估计以当前速率播放不能直接将媒体播放完，即可能音播放期间需要缓冲而停止
canplaythrough	浏览器以当前速率可以直接播放完整个媒体资源，在此期间不需要缓冲
durationchange	媒体长度（duration属性）改变
emptied	媒体资源元素突然为空时，可能是网络错误或加载错误等
ended	媒体播放已抵达结尾
error	在元素加载期间发生错误
loadeddata	已经加载当前播放位置的媒体数据
loadedmatadata	浏览器已经获取媒体元素的持续时间和尺寸
loadstart	浏览器开始加载媒体数据
pause	媒体数据暂停播放
play	媒体数据将要开始播放
playing	媒体数据已经开始播放
progress	浏览器正在获取媒体数据
ratechange	媒体数据的默认播放速率（defaultPlaybackRate属性）改变或播放速率（playbackRate属性）改变
readystatechange	就绪状态（ready-state）改变
seeked	浏览器停止请求数据，媒体元素的定位属性不再为真（seeking属性值为false）且定位已结束
seeking	浏览器正在请求数据，媒体元素的定位属性为真（seeking属性值为true）且定位已开始
stalled	浏览器获取媒体数据过程出现异常
suspend	浏览器非主动获取媒体数据，但在取回整个媒体文件之前中止
timeupdate	媒体当前播放位置（currentTime属性）发生改变
volumechange	媒体音量（volume属性）改变或静音（muted属性）
waiting	媒体已停止播放但打算继续播放