《html5的多媒体》由会员分享,可在线阅读,更多相关《html5的多媒体(17页珍藏版)》请在金锄头文库上搜索。
1、第4章 HTML5的多媒体,4.1 多媒体元素属性,4.3 多媒体元素事件,4.2 多媒体元素方法,4.1 多媒体元素属性,HTML5新增了两个多媒体元素video和audio,分别用于在网页中添加视频和音频信息。多媒体元素的属性包括 (1)autoplay属性 该属性用于设置指定的媒体文件,在页面加载完毕后是否自动播放。当多媒体元素的autoplay属性设置为“true”,其所在页面加载完毕后,将会自动执行播放操作。 (2)controls属性 该属性用于在页面播放器面板上,显示一个元素自带的控制按钮工具栏。工具栏中提供了播放/暂停按钮,播放进度条,静音开关。对于不同的浏览器,该工具栏样式可
2、能会有所区别。 (3)error属性 当多媒体元素加载或读取媒体文件过程中出现错误或异常时,可通过该属性返回一个错误对象MediaError,用于获取错误类型。,错误对象MediaError提供的返回值及说明如下表所示,(4)poster属性 该属性用于指定一个图片路径,该图片将占据video元素对应视频控件在网页中的位置,并在播放video元素指定媒体文件之前显示,或者在播放过程中出错显示。,(5)networkState属性 该属性用于返回加载媒体文件的网络状态。在浏览器加媒体文件时,通过调用onProgress事件获取当前网络状态值。返回值如下表所示,(6)width和height属性
3、这两个属性主要用于设置video元素在页面中显示的大小,单位为像素。如果未指定宽度和高度属性,该元素对应控件在浏览器中将默认以媒体元素大小进行显示。 (7)readyState属性 该属性用于返回播放器当前媒体文件的播放状态。当媒体文件开始播放时,通过调用onPlay事件获取当前媒体播放状态值。,4.2 多媒体元素方法,HTML5提供了一些多媒体元素方法,方便用户自定义控制播放。 1. HTML5支持的视频制式 (1)Theora (2)Ogg (3)VP8 (4)AAC (5)H.264 (6)WebM,目前各主流浏览器对各种视频制式支持性如下表所示,2. HTML5对媒体支持性检测 can
4、PlayType()方法的不同返回值,可确定当前浏览器对媒体的支持性。 (1)当返回值为空字符时,表示应用浏览器不支持当前待播放的媒体文件格式。 (2)当返回值为maybe时,表示不确定应用浏览器是否能够支持当前待播放的媒体文件格式。 (3)当返回值为probably时,表示应用浏览器支持当前待播放的媒体文件格式。,3. load,play及pause方法 (1)load方法,用于重新加载待播放的媒体文件。调用load方法时,会自动将多媒体元素的playbackRate属性设置为defaultPlaybackRate属性的值,同时将error属性值设置为null。,(2)play方法,用于播放
5、媒体文件。调用play方法时,会自动将元素paused的属性设置为false。 (3)pause方法,用于暂停播放媒体文件。调用pause方法时,会自动将元素的paused属性设置为true。,4.3 多媒体元素事件,HTML5多媒体元素在读取或播放媒体文件的过程中,会触发一系列的事件,使用JavaScript可以捕捉事件并进行处理。,1. 事件捕捉方法 (1)监听方式。使用addEventListener方法可以对当前设定多媒体元素的事件进行监听。 该方法的参数说明如下: type为捕捉事件的名称 listener为绑定的函数 useCapture为事件的响应顺序。 (2)获取事件句柄。通过在多媒体元素中使用onPlay,onPause等句柄获取事件,同时在指定的JavaScript方法中编写处理代码。,2. 支持的事件类型 HTML5提供了请求加载,开始加载,开始播放,暂停播放等一系列的多媒体播放事件,详见下表,先来看几个例子 上机实践 完成实验,开始实验吧!,