学习笔记之HTML5-多媒体

1. HTML5音频

HTML5中，新增了audio元素，用来播放声音文件或者音频流。

语法： src属性用于指定要播放的声音文件，controls属性用于提供播放、暂停和音量控件。

<audio src="test.mp3" controls="controls"></audio>

注意：src属性定义媒体文件的URL。替换内容不仅可以使用文本，还可以是一些其他音频插件，或者是声音文件的链接等。

示例1：使用source元素来链接到不同的音频文件，浏览器会自己选择第一个可以识别的格式。

<audio controls>
	<source src="mebias/music.ogg" type="audio/ogg">
	<source src="medias/music.mp3" type="audio/mp3">
	您的浏览器不支持audio标签。			
</audio>

示例2：在页面中插入背景音乐。

实际上使用audio元素实现循环播放一首背景音乐非常简单，只需在audio元素中设置autoplay和loop属性。

<audio autoplay loop>
	<source src="music.ogg">
	<source src="music.mp3">			
</audio>

 

2. HTML5视频

HTML5新增了video元素，来播放视频文件或视频流。

语法： src属性用来指定要播放的视频文件，controls属性用于提供播放、暂停和音量控件，也可以包含宽度和高度属性。

<video src="look.mp4" controls="controls"></video>

示例1：

<video controls="controls">
	<source src="medias/look.ogg" type="audio/ogg"></source>
	<source src="medias/look.mp4" type="audio/mp4"></source>
</video>

示例2：设置autoplay属性，不需要交互，音频或视频文件就在加载完成后自动播放。不过用户一般比较反感自动播放模式。

<video autoplay>
	<source src="medias/look.ogg" type="audio/ogg"></source>
	<source src="medias/look.mp4" type="audio/mp4"></source>
</video>

 

扩展：如果内置的控件不适应用户界面的布局，或者希望使用默认控件中没有的条件或者动作来控制音频或者视频文件，可以借助一些内置的javascript函数和属性来实现。

① load()：该函数可以加载音频或视频文件，为播放做准备。通常情况下不必调用，除非是动态生成的元素。该函数用来在播放前预加载。

② play()：该函数可以加载并播放音频或视频文件，除非音频或视频文件已经暂停在其他位置了，否则默认从头播放。

③ pause()：该函数暂停处于播放状态的音频或视频文件。

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

注意： canPlayType(type)函数有一个特殊的用途：向动态创建的video元素中传入某段视频的MIME类型后，仅仅通过一行脚本语句即可获得当前浏览器对相关视频类型的支持情况。

 

3. 设置属性、方法

3.1 音频和视频属性

1）autobuffer属性：可读写属性，设置自动缓冲。

默认值为false，即默认情况下并不自动缓冲；如果值为true，则自动缓冲，但并不播放；如果用了autoplay属性，则autobuffer属性会被忽略。

2）autoplay属性：可读写属性，设置页面加载后自动播放。

其值可以设置为true或false。值为true或直接为autoplay时，音频或视频缓冲到足够多时即开始播放。

3）buffered属性：只读属性，返回一个TimeRanges对象，确认浏览器已经缓存媒体文件。

4）controls属性：可读写属性，设置是否显示控制条，包含播放、暂停、定位、时间显示、音量控制、全屏切换等常用控件。

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

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

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

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

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

10）error属性：只读属性，无默认值，返回一个MediaError对象以表明当前的错误状态，如果没有出现错误，则返回null。

错误状态共有4个值。

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

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

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

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

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

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

13）muted属性：可读写属性，无默认值，获取或设置当前媒体播放是否开启静音，取值true为开启静音，取值false为未开启静音。如果对其赋值，则可以设置播放时是否静音。

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方法：用于返回已播放时间段的开始时间。

示例：

<script>
	var ranges = document.getElementById('myVideo').played;
	for(var i=0;i<ranges.length;i++)
		var start = ranges.start(i);
		var end =ranges.end(i);
		alert("从"+start+"开始播放到"+end+"结束");
</script>

18）preload属性：可读写属性，无默认值，定义视频是否预加载。

该属性有3个可选值：none、metadata和auto。

如果不要改属性，则默认为auto。

① none：不进行预加载。当页面制作人员认为用户不希望此视频，或者减少HTTP请求。

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

③ auto：全部预加载。

<video src="movies.mp4" preload="auto"></video>

19）readyState属性：只读属性，无默认值，返回媒体当前播放位置的就绪状态。

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

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

22）src属性：可读写属性，无默认值，指定媒体资源的URL地址，与<img>标签类似，可与poster属性连用。

poster属性：用于指定一张替换图片，如果当前媒体数据无效，则显示该图片。

23）volume属性：可读写属性，无默认值，获取或设置媒体资源的播放音量，范围0.0~1.0为静音，1.0为最大音量。

注意：音量大小并非是线性变化的，如果同时使用了muted属性，则此属性会被忽略。

 

3.2 音频和视频相关方法介绍

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。