移动商务网页设计与制作教学课件作者魏利华第7章多媒体播放.ppt

７.４　多媒体元素的重要事件 （７）使用ｖｉｄｅｏ元素的ａｄｄＥｖｅｎｔｌｉｓｔｅｎｅｒ方法对ｄｕｒａｔｉｏｎｃｈａｎｇｅ和ｔｉｍｅｕｐｄａｔｅ等事件进行监听，同时绑定ｕｐｄａｔｅＳｅｅｋａｂｌｅ和ｕｐｄａｔｅＰｌａｙｈｅａｄ函数，在这两个函数中输出媒体文件的总时间长度和当前播放时间。代码如下：其运行效果如图７.４所示。 上一页 返回 ７.５　小结 本章介绍了ＨＴＭＬ５中ｖｉｄｅｏ元素和ａｕｄｉｏ元素的用法，并演示了如何使用它们构建Ｗｅｂ应用。Ａｕｄｉｏ元素和ｖｉｄｅｏ元素的引入让ＨＴＭＬ５的应用多了一种选择：不使用插件即可播放音频和视频。此外，ａｕｄｉｏ元素和ｖｉｄｅｏ元素还提供了通用的、集成化的可用脚本控制的ＡＰＩ。 返回 图７.１　在ＨＴＭＬ４中播放视频 返回 表７.１ 目前浏览器对ｖｉｄｅｏ元素和ａｕｄｉｏ元素的支持情况 返回 表７.２ ｓｏｕｒｃｅ元素的几个属性 返回 图７.２　Ｆｉｒｅｆｏｘ３.５浏览器播放ＨＴＭＬ５视频时的控制条 返回 图７.３　用Ｆｉｒｅｆｏｘ３.５浏览器播放ｏｇｖ视频文件 返回 图７.４　事件捕捉实例 返回 * 第7 章 多媒体播放 7. 1 HTML5 多媒体概述 7. 2 多媒体元素的基本属性 7. 3 多媒体元素的常用方法 7. 4 多媒体元素的重要事件 7. 5 小结 返回 7. 1 HTML5 多媒体概述 ７.１.１　ＨＴＭＬ４中的多媒体 在ＨＴＭＬ５之前，在网页中加入视频时必须使用ｏｂｊｅｃｔ和ｅｍｂｅｄ元素，而且还要为这两个元素添加许多属性和参数，例如下面代码： 下一页 返回 7. 1 HTML5 多媒体概述 其运行结果如图７.１所示。 从上面的代码可看出，ＨＴＭＬ４有如下缺点： （１）代码冗长、笨拙。 （２）需要使用第三方插件如ｆｌａｓｈ。如果浏览器没有安装相应插件，则不能播放视频，网页上会出现一片空白。 ７.１.２　ＨＴＭＬ５中的多媒体 ＨＴＭＬ５新增了两个多媒体元素———ｖｉｄｅｏ元素和ａｕｄｉｏ元素。ｖｉｄｅｏ元素用来播放网络上的视频或电影，ａｕｄｉｏ元素用来播放网络上的音频文件。使用这两个元素后，不再需要其他插件，只要使用支持ＨＴＭＬ５的浏览器就可以了。目前浏览器对ｖｉｄｅｏ元素和ａｕｄｉｏ元素的支持情况见表７.１。 上一页 下一页 返回 7. 1 HTML5 多媒体概述 如果浏览器支持ｏｇｇ格式，就播放ｈｏｒｓｅ.ｏｇｇ，如果浏览器不支持ｏｇｇ格式，就会继续往下找播放文件，如果浏览器支持ｍｐ３，则播放第二个源文件，如果浏览器既不支持ｏｇｇ格式，也不支持ｍｐ３格式，又没有别的文件可找了，就显示“Ｙｏｕｒｂｒｏｗｓｅｒｄｏｅｓｎｏｔｓｕｐｐｏｒｔｔｈｅａｕｄｉｏｅｌｅｍｅｎｔ.”信息。 ｓｏｕｒｃｅ元素的几个属性见表７.２。 上一页 返回 ７.２　多媒体元素的基本属性 ｖｉｄｅｏ元素与ａｕｄｉｏ元素所具有的属性大致相同，下面介绍各ｖｉｄｅｏ元素和ａｕｄｉｏ元素的属性。 １.ｓｒｃ属性和ａｕｔｏｐｌａｙ属性 ｓｒｃ属性用于指定媒体数据的ＵＲＬ地址。ａｕｔｏｐｌａｙ属性用于指定媒体是否在页面加载后自动播放。其使用方法如下： ２.ｐｅｒｌｏａｄ属性 该属性用于指定视频或音频数据是否预加载。如果使用预加载，则浏览器会预先对视频或音频数据进行缓冲，这样可以加快播放速度，因为播放时数据已经预先缓冲完毕。该属性有３个可选值，分别是ｎｏｎｅ、ｍｅｔａｄａｔａ和ａｕｔｏ，其默认值为ａｕｔｏ。 下一页 返回 ７.２　多媒体元素的基本属性 ３.ｐｏｓｔｅｒ（ｖｉｄｅｏ元素的独有属性）和ｌｏｏｐ属性 对于ｐｏｓｔｅｒ，当视频不可用时，可以使用该元素向用户展示一幅替代用的图片。当视频不可用时，最好使用ｐｏｓｔｅｒ属性，以免展示视频的区域中出现一片空白。该属性的使用方法如下： ｌｏｏｐ属性用于指定是否循环播放视频或音频，其使用方法如下： 上一页 下一页 返回 ７.２　多媒体元素的基本属性 ４.ｃｏｎｔｒｏｌｓ属性 它指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条具有播放、暂停等按钮（图７.２）。其使用方法如下： ｗｉｄｔｈ属性与ｈｅｉｇｈｔ属性用于指定视频的宽度与高度（以像素为单位），使用方法如下： 上一页 下一页 返回 ７.２　多媒体元素的基本属性 ５.ｅｒｒｏｒ属性 在读取、使用媒体数据的过程中，在正常情况下，该属性为ｎｕｌｌ，但是任何时候只要出现错误，该属性将返回一个ＭｅｄｉａＥｒｒｏｒ对象，该对象的ｃｏｄｅ属性返回对应的错误状态码，其可能的值包括： （１）ＭＥＤＩＡ＿ＥＲＲ＿ＡＢＯＲＴＥＤ （数值１）：媒体数据的下载过程由于用户的操作原因而被终止。 （２）ＭＥＤＩＡ＿ＥＲＲ＿ＮＥＴＷＯＲＫ （数值２）：确认媒体资源可用，但是在下载时出现网络错误