4.1--HTML5的多媒体元素.ppt

第4章HTML5的多媒体4.1HTML5的多媒体元素4.3多媒体元素的方法4.2多媒体元素的属性4.4多媒体元素的事件4.5上机实践——DIY视频播放器4.1HTML5的多媒体元素HTML5中主要增加了两个新的多媒体元素：video和audio。从字面意思可以知道，video元素是与视频相关的，用于在页面中播放视频文件；audio元素是与音频相关的，用于在页面中播放音频文件。在前面章节中，我们已经简单介绍了这两个新增的多媒体元素，并给出了基本的应用效果，本章将详细介绍这两个元素的属性、事件及使用。4.2多媒体元素的属性4.2.1autoplay属性该属性用于设置指定的媒体文件，在页面加载完毕后是否自动播放。对于有的页面来说，所包含的视频或音频信息，不需要得到用户指令就可以直接播放。例如，页面内的宣传片、广告信息等，可以在对应的多媒体元素上添加autoplay属性的设置达到媒体自动播放的效果。使用autoplay属性的示例代码如下。!DOCTYPEhtmlhtmlmetacharset=gb2312/videoid=myvideosrc=video/4_1.mp4autoplay=true/videoaudioid=myaudiosrc=audio/4_2.mp3autoplay=true/audio/html此段代码中，分别添加了一个video视频元素和一个audio音频元素，并将它们的autoplay属性设置为true。当该页面打开时，视频和音频会同时开始播放。4.2.2controls属性该属性用于在页面播放器面板上，显示一个元素自带的控制按钮工具栏。工具栏中提供了播放/暂停按钮、播放进度条、静音开关，对于不同的浏览器，该工具栏样式可能会有所区别。使用controls属性的示例代码如下。!DOCTYPEhtmlhtmlmetacharset=gb2312/videoid=myvideosrc=video/4_1.mp4controls=true/videobrbraudioid=myaudiosrc=audio/4_2.mp3controls=true/audio/html此段代码分别为video及audio元素添加了controls属性设置。保存上述代码并在浏览器中运行，得到的效果如图4-1所示。图4-1是在Chrome浏览器中的显示效果，其中上面部分显示的是video元素生成的视频控件，下面部分为audio元素生成的音频控件。图4-1controls属性显示工具条效果4.2.3error属性该属性是一个只读属性，用于当多媒体元素加载或读取媒体文件过程中出现错误或异常时，返回一个错误对象MediaError，用于指示错误类型。错误对象MediaError提供的返回值及说明如表4-1所示。表4-1 MediaError返回值说明字符常量返回值说明MEDIA_ERR_ABORTED1读取或加载媒体文件过程中出现错误或异常而放弃操作MEDIA_ERR_NETWORK2网络错误，通常用于读取或加载指定网络地址的媒体文件续表字符常量返回值说明MEDIA_ERR_DECODE3指定的媒体资源不可用，通常由于缺少对应的解码器MEDIA_ERR_SRC_NOT_SUPPORTED4没有可以播放的媒体格式使用error属性获取错误信息的示例代码如下。!DOCTYPEhtmlhtmlmetacharset=gb2312/scriptfunctionshow(){ varvideo=document.getElementById(myvideo); varerrorCode=video.error.code;//获取MediaError返回值 if(errorCode==1) { alert(读取或加载媒体文件出错！); } elseif(errorCode==2) { alert(网络资源不可用！); } elseif(errorCode==3) { alert(解码错误！); } else { alert(不支持的媒体格式！); }}/scriptvideoid=myvideosrc=video/4_12.txtcontrols=trueonError=show()/video/html此段代码中，为video元素指定了一个txt类型的文件作为媒体文件，显然这是一个错误的媒体格式。保存上述代码并在浏览器中运行，得到的结果