《JavaScript操作视频控件 课件》由会员分享，可在线阅读，更多相关《JavaScript操作视频控件 课件（17页珍藏版）》请在金锄头文库上搜索。
1、JavaScript操作视频控件,在前面的章节中，讲解了如何使用JavaScript操作操作页面的样式与内容。通过对CSS和DOM对象的控制，可以实现对页面的掌控。,1 示例：通用媒体播放器,读者在Internet上浏览页面的时候，或多或少都曾接触过嵌在页面中中的视频或音频等多媒体对象。这通常是利用嵌入的ActiveX控件对象来实现的。然而不同的媒体格式常常需要不同的ActiveX控件，代码15-1.htm是一个自动识别媒体格式，并调用相应播放控件的例子。 代码15-1.htm 通用媒体播放器 15-1 通用媒体播放器 * font-size:12px; font-family:宋体, Ari
2、al; /*规定了所有的字体样式*/ body overflow:auto; /* 定义了媒体播放器的背景和尺寸 */ #playerDIV background-image: url(inc/img/15-1.gif); width:300px; height:200px; /在全局变量中保存各个不同媒体播放控件的CLSID var rmID=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA; var wmID=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95; var swfID=clsid:D27CDB6E-AE6D
3、-11cf-96B8-444553540000;,2 “ActiveX”控件简介,根据微软的软件开发指南MSDN（Microsoft Developer Network）的定义，“ActiveX”插件以前也叫做“OLE”控件或“OCX”控件，其为一些软件组件或对象，可以将其插入到WEB网页或其它应用程序中。,2.1 “ActiveX”控件的意义,程序员最大的烦恼之一，就是需要不断的进行重复性的劳动。有时明明是功能非常相似的模块，却因为操作平台或项目的不同，必须要重新修改甚至于重新编写。为了解决代码的重用问题，人们提出了“组件”的概念。 “ActiveX”是Microsoft对于一系列策略性面向
4、对象程序技术和工具的称呼，其中主要的技术是“组件对象模型”（“COM”）。在有目录和其他支持的网络中，“COM”则成为“分布式组件对象模型”（“DCOM”）。在创建包括ActiveX程序时，主要的工作就是组件，一个可以自足的在“ActiveX”网络（现在的网络主要包括Windows和Mac）中任意运行的程序。这个组件就是“ActiveX”控件，其功能和“Java Applet”功能类似。,2.2 在HTML页面中使用“ActiveX”控件,对于每一个“ActiveX”控件，都有一个对应的字符串，作为惟一性的标识，这个标识被称作“全局唯一标志符”（“GUID”或“UUID”）。此标志符由专用算法
5、自动生成，用以唯一的标识每个不同的控件。 在HTML页面中，使用“object”标记来使用“ActiveX”对象。每个“object”对象至少需要指定一个“classid”属性，来标识此对象所引用的“ActiveX”控件。 “object”对象可以写在HTML文档的“head”或者“body”区域。处于“object”对象内部的HTML文本，会被浏览器自动的忽略。因此可以使用类似下面的代码： “ActiveX”控件载入失败！ - 请检查浏览器的安全性设置 ,3 JavaScript操作Windows Media Player播放器,程序员可以通过ActiveX控件的方式，将“Windows M
6、edia Player”播放器插入到Web页面中，来实现一般音频或视频等多媒体文件的播放。由于“Windows Media Player”是“Windows”系统附带的系统播放器，因此通常在使用时无需下载，比较快捷方便。,3.1 在网页中插入“Windows Media Player”控件,对于不同的浏览器，由于其对HTML的解释和执行的不同，在Web页面中插入“Windows Media Player”控件的方式稍有不同。 对于“Internet Explorer”浏览器的5.0或以上版本，以及“Nescape”浏览器7.1或以上版本来说，在页面中插入“Windows Media Playe
7、r”控件，只需要简单的使用“object”对象，并赋以相应的“classid”属性即可。例如： ,3.2 “Windows Media Player”控件的脚本对象模型（一）,“ActiveX”控件在脚本中同样作为对象表现。“Windows Media Player”控件被依据不同的功能，划分为若干不用的自对象，其共同点根对象为“Player”对象，其他对象均通过此根对象的对应属性获取。图是“Windows Media Player”控件的对象模型结构。,3.3 “Windows Media Player”控件的脚本对象模型（二）,“MediaCollection”对象没有属性。 注意：在调用
8、“MediaCollection”对象的“add”或“remove”方法时，需要具有对用户媒体库的完全访问权限，即允许对媒体库进行读和写的操作。 下面的代码是一个对“MediaCollection”对象的简单应用，其作用是添加两首歌曲到用户的媒体库，然后将媒体库中的所有歌曲生成一个播放列表，并进行随机播放其中的某个媒体。 /添加歌曲到媒体库 hutia.MediaCollection.add(“C:music001.mp3”); hutia.MediaCollection.add(“C:music002.mp3”); /获取新的播放列表 var lst = hutia.MediaCollect
9、ion.getAll(); /设置当前的媒体 hutia.currentMedia =lst.item(parseInt(Math.random()*lst.count); /开始播放 hutia.controls.play();,3.4 “Windows Media Player”控件的脚本对象模型（三）,（11）“Player”对象。在前面给出的“Windows Media Player”控件对象模型（图15.7）可以看出，此对象是所有其他对象的根对象。在JavaScript中，获取的“object”对象本身就是“Player”对象。例如： 则“document.getElementByI
10、d(“hutia”)”返回的就是该控件的“Player”对象。表列出了“Player”对象的属性和方法。 程序的运行效果如图所示。,3.5 “Windows Media Player”控件的脚本对象模型（四）,（16）“Query”对象，用于实现对媒体库中媒体的联合查询。 此对象没有属性，其具有的方法有：“addCondition”和“beginNextGroup”。 “addCondition(attribute, operator, value)”方法以“和”（“And”）的逻辑向查询对象中添加新的条件。参数“attribute”字符串型，为需要查询的属性的名称。参数“operator”字
11、符串型，为条件的操作符，可能的取值见下表。参数“value”为需要用于比较判断的属性值。,3.6 “Fire Fox”浏览器对“Windows Media Player”控件的支持,由于浏览器解释核心的不同，有些子对象不被其他浏览器支持。表列出了“Fire Fox”浏览器对此控件子对象的支持情况。,4 使用Real Player控件播放流媒体文件,1995年，RealNetworks公司（当时叫做Progressive Networks公司）的RealAudio Player开创了流式音频的先河。随着网络的发展，流媒体以其快速的相应能力，越来越受到人们的喜爱。目前，采用流媒体技术的音视频文件主
12、要有三大“流派”。一是微软的ASF（“Advanced Stream Format”），这类文件的后缀是“.asf”和“.wmv”，与其对应的播放器是“Windows Media Player”；二是Real Networks公司的“RealMedia”，其包括“Real Audio”、“Real Video”和“Real Flash”三类文件，其文件后缀名通常是“.rm”和“.rmvb”；三是苹果公司的“Quick Time”，这类文件扩展名通常是“.mov”，其对应的播放器是“QuickTime”。通过使用“Real Player”控件，可以实现在Web页面中播放“Real Audio”、
13、“Real Video”和“Real Flash”类型的流媒体。,4.1 在Web页面中插入“Real Player”控件,在Web页面中插入“Real Player”控件同样是通过“object”标记来实现的，例如： 其界面如图15.14所示。 可以通过“param”元素为“Real Player”控件提供初始化的参数，例如： ,4.2 “Real Player”控件支持的属性,“Real Player”控件支持的属性有： （1）“AutoGotoURL”布尔型，设置或返回是否允许自动响应流数据中的URL操作。 （2）“AutoStart”布尔型，设置或返回当媒体内容可用时是否自动开始播放。
14、 （3）“Console”字符串型，设置或返回控件的控制台名称。 （4）“Controls”字符串型，设置或返回控件显示的组件，例如“PlayButton”和“StopButton”等。 （5）“Source”字符串型，设置或返回流媒体剪辑的地址（可以为“pnm:”、“file:”或“http:”等协议） （6）“WindowName”字符串型，设置或返回此控件的窗口名称。,4.3 “Real Player”控件支持的方法,表列出了“Real Player”控件支持的方法，通过这些方法，可以控制其的外观样式、播放进程、音量大小等。 通过表中的方法可以看出。“Real Player”控件将所有的
15、外观样式、流程控制、带宽信息等均作为控件的方法来操作。,5 小结,本章介绍了ActiveX控件的含义，以及如何在HTML页面中插入需要的ActiveX控件。详细介绍了“Windows Media Player”和“Real Player”控件的使用方法，及各个控件支持的属性和方法。以实例说明了如何通过脚本，实现对媒体播放的完全控制。本章的知识点有： （1）“ActiveX”控件的意义 （2）如何在HTML页面中使用“ActiveX”控件 （3）“Windows Media Player”控件的脚本对象模型 （4）“Fire Fox”浏览器对“Windows Media Player”控件的支持 （5）如何使用Real Player控件播放流媒体文件,
