第15章JavaScript操作视频控件.

第15章JavaScript操作视频控件•在前面的章节中，讲解了如何使用JavaScript操作操作页面的样式与内容。通过对CSS和DOM对象的控制，可以实现对页面的掌控。自本章起，将进入对若干ActiveX控件的讲解。通过操控ActiveX控件对象，可以实现很多无法单纯依靠HTML实现的效果。15.1示例：通用媒体播放器•读者在Internet上浏览页面的时候，或多或少都曾接触过嵌在页面中中的视频或音频等多媒体对象。这通常是利用嵌入的ActiveX控件对象来实现的。然而不同的媒体格式常常需要不同的ActiveX控件，代码15-1.htm是一个自动识别媒体格式，并调用相应播放控件的例子。•代码15-1.htm通用媒体播放器•html•head•metahttp-equiv=content-typecontent=text/html;charset=GB2312/•title15-1通用媒体播放器/title•style•*{font-size:12px;font-family:宋体,Arial;}/*规定了所有的字体样式*/•body{overflow:auto;}•/*定义了媒体播放器的背景和尺寸*/•#playerDIV{•background-image:url(inc/img/15-1.gif);•width:300px;•height:200px;•}•/style•script•//在全局变量中保存各个不同媒体播放控件的CLSID•varrmID=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA;•varwmID=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95;•varswfID=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000;15.2“ActiveX”控件简介•根据微软的软件开发指南MSDN（MicrosoftDeveloperNetwork）的定义，“ActiveX”插件以前也叫做“OLE”控件或“OCX”控件，其为一些软件组件或对象，可以将其插入到WEB网页或其它应用程序中。15.2.1“ActiveX”控件的意义•程序员最大的烦恼之一，就是需要不断的进行重复性的劳动。有时明明是功能非常相似的模块，却因为操作平台或项目的不同，必须要重新修改甚至于重新编写。为了解决代码的重用问题，人们提出了“组件”的概念。•“ActiveX”是Microsoft对于一系列策略性面向对象程序技术和工具的称呼，其中主要的技术是“组件对象模型”（“COM”）。在有目录和其他支持的网络中，“COM”则成为“分布式组件对象模型”（“DCOM”）。在创建包括ActiveX程序时，主要的工作就是组件，一个可以自足的在“ActiveX”网络（现在的网络主要包括Windows和Mac）中任意运行的程序。这个组件就是“ActiveX”控件，其功能和“JavaApplet”功能类似。15.2.2在HTML页面中使用“ActiveX”控件•对于每一个“ActiveX”控件，都有一个对应的字符串，作为惟一性的标识，这个标识被称作“全局唯一标志符”（“GUID”或“UUID”）。此标志符由专用算法自动生成，用以唯一的标识每个不同的控件。•在HTML页面中，使用“object”标记来使用“ActiveX”对象。每个“object”对象至少需要指定一个“classid”属性，来标识此对象所引用的“ActiveX”控件。•“object”对象可以写在HTML文档的“head”或者“body”区域。处于“object”对象内部的HTML文本，会被浏览器自动的忽略。因此可以使用类似下面的代码：•objectclassid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95•spanstyle=color:red•“ActiveX”控件载入失败！•--请检查浏览器的安全性设置•/span•/object15.3JavaScript操作WindowsMediaPlayer播放器•程序员可以通过ActiveX控件的方式，将“WindowsMediaPlayer”播放器插入到Web页面中，来实现一般音频或视频等多媒体文件的播放。由于“WindowsMediaPlayer”是“Windows”系统附带的系统播放器，因此通常在使用时无需下载，比较快捷方便。15.3.1在网页中插入“WindowsMediaPlayer”控件•对于不同的浏览器，由于其对HTML的解释和执行的不同，在Web页面中插入“WindowsMediaPlayer”控件的方式稍有不同。•对于“InternetExplorer”浏览器的5.0或以上版本，以及“Nescape”浏览器7.1或以上版本来说，在页面中插入“WindowsMediaPlayer”控件，只需要简单的使用“object”对象，并赋以相应的“classid”属性即可。例如：•OBJECTID=hutiaheight=180width=240•CLASSID=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6•/OBJECT15.3.2“WindowsMediaPlayer”控件的脚本对象模型（一）•“ActiveX”控件在脚本中同样作为对象表现。“WindowsMediaPlayer”控件被依据不同的功能，划分为若干不用的自对象，其共同点根对象为“Player”对象，其他对象均通过此根对象的对应属性获取。图是“WindowsMediaPlayer”控件的对象模型结构。15.3.3“WindowsMediaPlayer”控件的脚本对象模型（二）•“MediaCollection”对象没有属性。•注意：在调用“MediaCollection”对象的“add”或“remove”方法时，需要具有对用户媒体库的完全访问权限，即允许对媒体库进行读和写的操作。•下面的代码是一个对“MediaCollection”对象的简单应用，其作用是添加两首歌曲到用户的媒体库，然后将媒体库中的所有歌曲生成一个播放列表，并进行随机播放其中的某个媒体。•!--WindowsMediaPlayer控件，设置其尺寸为0*0，因此其被隐藏--•OBJECTID=hutiaheight=0width=0•CLASSID=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6•paramname=URLvalue=F:\back\music\hereiam.mp3/•paramname=AutoStartvalue=False/•/OBJECT•script•//添加歌曲到媒体库•hutia.MediaCollection.add(“C:\\music\\001.mp3”);•hutia.MediaCollection.add(“C:\\music\\002.mp3”);•//获取新的播放列表•varlst=hutia.MediaCollection.getAll();•//设置当前的媒体•hutia.currentMedia=lst.item(parseInt(Math.random()*lst.count));•//开始播放•hutia.controls.play();15.3.4“WindowsMediaPlayer”控件的脚本对象模型（三）•（11）“Player”对象。在前面给出的“WindowsMediaPlayer”控件对象模型（图15.7）可以看出，此对象是所有其他对象的根对象。在JavaScript中，获取的“object”对象本身就是“Player”对象。例如：•OBJECTID=hutiaheight=0width=0•CLASSID=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6•/OBJECT•则“document.getElementById(“hutia”)”返回的就是该控件的“Player”对象。表列出了“Player”对象的属性和方法。•程序的运行效果如图所示。15.3.5“WindowsMediaPlayer”控件的脚本对象模型（四）•（16）“Query”对象，用于实现对媒体库中媒体的联合查询。•此对象没有属性，其具有的方法有：“addCondition”和“beginNextGroup”。•“addCondition(attribute,operator,value)”方法以“和”（“And”）的逻辑向查询对象中添加新的条件。参数“attribute”字符串型，为需要查询的属性的名称。参数“operator”字符串型，为条件的操作符，可能的取值见下表。参数“value”为需要用于比较判断的属性值。15.3.6“FireFox”浏览器对“WindowsMediaPlayer”控件的支持•由于浏览器解释核心的不同，有些子对象不被其他浏览器支持。表列出了“FireFox”浏览器对此控件子对象的支持情况。15.4使用RealPlayer控件播放流媒体文件•1995年，RealNetworks公司（当时叫做ProgressiveNetworks公司）的RealAudioPlayer开创了流式音频的先河。随着网络的发展，流媒体以其快速的相应能力，越来越受到人们的喜爱。目前，采用流媒体技术的音视频文件主要有三大“流派”。一是微软的ASF（“AdvancedStreamFormat”），这类文件的后缀是“.asf”和“.wmv”，与其对应的播放器是“WindowsMediaPlayer”；二是RealNetworks公司的“RealMedia”，其包括“RealAudio”、“RealVideo”和“RealFlash”三类文件，其文件后缀名通常是“.rm”和“.rmvb”；三是苹果公司的“QuickTime”，这类文件扩展名通常是“.mov”，其对应的播放器是“QuickTime”。通过使用“RealPlayer”控件，可以实现在Web页面中播放“RealAudio”、“RealVideo”和“RealFlash”类型的流媒体。15.4.1在Web页面中插入“RealPlayer”控件•在Web页面中插入“RealPlayer”控件同样是通过“object”标记来实现的，例如：•OBJECTID=hutiaheight=180width=240•CLASSID=CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA•/OBJECT•其界面如图15.14所示。•可以通过“param”元素为“RealPlayer”控件提供初始化的参数，例如：•objectwidth=320height=30•classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA•paramname=CONTROLSvalue=ControlPanel•paramname=CONSOLEvalue=Video•paramname=SRCvalue=F:\back\music\hereiam.mp3•paramname=AUTOSTARTvalue=TRUE•paramname=PREFETCHvalue=0•paramname=LOOPvalue=0•paramname=NUMLOOPvalue=0•/object15.4.2“RealPlayer”控件支持的属性•“RealPlayer”控件支持的属性有：•（1）“AutoGotoURL”布尔型，设置或返回是否允许自动响应流数据中的URL操作。•（2）“AutoStart”布尔型，设置或返回当媒体内容可用时是否自动开始播放。•（3）“Console”字符串型，设置或返回控件的控