1、JS從入門到精通,第15章 JavaScript操作視頻控件,第15章 JavaScript操作視頻控件,在前面的章節(jié)中，講解了如何使用JavaScript操作頁面的樣式與內(nèi)容。通過對(duì)CSS和DOM對(duì)象的控制，可以實(shí)現(xiàn)對(duì)頁面的掌控。自本章起，將進(jìn)入對(duì)若干ActiveX控件的講解。通過操控ActiveX控件對(duì)象，可以實(shí)現(xiàn)很多無法單純依靠HTML實(shí)現(xiàn)的效果。 本章將介紹： “ActiveX”控件的意義 如何在HTML頁面中使用“ActiveX”控件 “Windows Media Player”控件的腳本對(duì)象模型 “Fire Fox”瀏覽器對(duì)“Windows Media Player”控件的支持 如

2、何使用Real Player控件播放流媒體文件,15.1 示例：通用媒體播放器,讀者在Internet上瀏覽頁面的時(shí)候，或多或少都曾接觸過嵌在頁面中中的視頻或音頻等多媒體對(duì)象。這通常是利用嵌入的ActiveX控件對(duì)象來實(shí)現(xiàn)的。然而不同的媒體格式常常需要不同的ActiveX控件，代碼15-1.htm是一個(gè)自動(dòng)識(shí)別媒體格式，并調(diào)用相應(yīng)播放控件的例子。,15.2 “ActiveX”控件簡介,根據(jù)微軟的軟件開發(fā)指南MSDN（Microsoft Developer Network）的定義，“ActiveX”插件以前也叫做“OLE”控件或“OCX”控件，其為一些軟件組件或?qū)ο?，可以將其插入到WEB網(wǎng)頁或其

3、它應(yīng)用程序中。,15.2.1 “ActiveX”控件的意義,程序員最大的煩惱之一，就是需要不斷的進(jìn)行重復(fù)性的勞動(dòng)。有時(shí)明明是功能非常相似的模塊，卻因?yàn)椴僮髌脚_(tái)或項(xiàng)目的不同，必須要重新修改甚至于重新編寫。為了解決代碼的重用問題，人們提出了“組件”的概念。,15.2.2 在HTML頁面中使用“ActiveX”控件,對(duì)于每一個(gè)“ActiveX”控件，都有一個(gè)對(duì)應(yīng)的字符串，作為惟一性的標(biāo)識(shí)，這個(gè)標(biāo)識(shí)被稱作“全局唯一標(biāo)志符”（“GUID”或“UUID”）。此標(biāo)志符由專用算法自動(dòng)生成，用以唯一的標(biāo)識(shí)每個(gè)不同的控件。 在HTML頁面中，使用“object”標(biāo)記來使用“ActiveX”對(duì)象。每個(gè)“object

4、”對(duì)象至少需要指定一個(gè)“classid”屬性，來標(biāo)識(shí)此對(duì)象所引用的“ActiveX”控件。,15.3 JavaScript操作Windows Media Player播放器,程序員可以通過ActiveX控件的方式，將“Windows Media Player”播放器插入到Web頁面中，來實(shí)現(xiàn)一般音頻或視頻等多媒體文件的播放。由于“Windows Media Player”是“Windows”系統(tǒng)附帶的系統(tǒng)播放器，因此通常在使用時(shí)無需下載，比較快捷方便。,15.3.1 在網(wǎng)頁中插入“Windows Media Player”控件,對(duì)于不同的瀏覽器，由于其對(duì)HTML的解釋和執(zhí)行的不同，在Web頁面

5、中插入“Windows Media Player”控件的方式稍有不同。,15.3.2 “Windows Media Player”控件的腳本對(duì)象模型（一）,“ActiveX”控件在腳本中同樣作為對(duì)象表現(xiàn)。“Windows Media Player”控件被依據(jù)不同的功能，劃分為若干不同的子對(duì)象，其根對(duì)象為“Player”對(duì)象，其他對(duì)象均通過此根對(duì)象的對(duì)應(yīng)屬性獲取。,“Windows Media Player”控件的對(duì)象模型,15.3.3 “Windows Media Player”控件的腳本對(duì)象模型（二）,（1）“MediaCollection”對(duì)象，用于操作播放的多媒體對(duì)象。其提供一種組織大量

6、的媒體文件的方法，可以通過對(duì)其操作來自動(dòng)生成播放列表。 （2）“Media”對(duì)象提供了對(duì)每一個(gè)媒體對(duì)象的訪問和播放控制?？梢酝ㄟ^“Controls”對(duì)象的“currentItem”屬性、“Player”對(duì)象的“currentMedia”屬性和“newMedia”方法，“PlayList”對(duì)象的“item”方法來獲取對(duì)“Media”對(duì)象的引用。 （3）“MetadataPicture”對(duì)象。此對(duì)象提供了獲取多媒體中圖片元數(shù)據(jù)屬性（“WM/Picture”屬性）的方法。這些屬性對(duì)應(yīng)于電子唱片集的封面。 （4）“MetadataText”對(duì)象和“MetadataPicture”對(duì)象類似，用于獲取多媒

7、體文件中的文本內(nèi)容。 （5）“Network”對(duì)象提供了對(duì)網(wǎng)絡(luò)的控制。此對(duì)象允許程序員獲取網(wǎng)絡(luò)質(zhì)量的信息，并提供了方法用于獲取或修改代理服務(wù)器設(shè)置。,15.3.4 “Windows Media Player”控件的腳本對(duì)象模型（三）,（1）“Player”對(duì)象。在前面給出的“Windows Media Player”控件對(duì)象模型（圖15.7）可以看出，此對(duì)象是所有其他對(duì)象的根對(duì)象。在JavaScript中，獲取的“object”對(duì)象本身就是“Player”對(duì)象。 （2）“PlayerApplication”對(duì)象僅僅用于C+編程，此處不做贅述。 （3）“PlaylistCollection”對(duì)象

8、用于組織用戶的播放列表。此對(duì)象可以通過“Player”對(duì)象的“PlaylistCollection”屬性獲取。 （4）“PlaylistArray”對(duì)象是一個(gè)“Playlist”對(duì)象的集合。 （5）“Playlist”對(duì)象提供了對(duì)播放列表的操作控制。,15.3.5 “Windows Media Player”控件的腳本對(duì)象模型（四）,（1）“Query”對(duì)象，用于實(shí)現(xiàn)對(duì)媒體庫中媒體的聯(lián)合查詢。 （2）“Setting”對(duì)象，允許程序員修改“Windows Media Player”控件的設(shè)置。 （3）“StringCollection”對(duì)象，用于操作字符串集合。,15.3.6 “Fire Fo

9、x”瀏覽器對(duì)“Windows Media Player”控件的支持,由于瀏覽器解釋核心的不同，有些子對(duì)象不被其他瀏覽器支持。 在“Fire Fox”瀏覽器中，根對(duì)象“Player”可以訪問，但是某些屬性不被瀏覽器支持。例如，對(duì)于“Player”對(duì)象的“dvd”屬性，在“Internet Explorer”瀏覽器中返回“DVD”子對(duì)象，而在“Fire Fox”瀏覽器中則返回空值“null”。 在“Fire Fox”瀏覽器中，“Player.pluginVersionInfo”屬性返回插件的版本信息。此屬性不被“Internet Explorer”瀏覽器所支持。 “Fire Fox”瀏覽器支持“P

10、layer.settings”子對(duì)象，但是并不支持此子對(duì)象的“setMode”方法和“requestMediaAccessRights”屬性。在“Fire Fox”瀏覽器中，試圖獲取“Player. requestMediaAccessRights”屬性將總是獲得“false”。,15.4 使用Real Player控件播放流媒體文件,1995年，RealNetworks公司（當(dāng)時(shí)叫做Progressive Networks公司）的RealAudio Player開創(chuàng)了流式音頻的先河。隨著網(wǎng)絡(luò)的發(fā)展，流媒體以其快速的相應(yīng)能力，越來越受到人們的喜愛。目前，采用流媒體技術(shù)的音視頻文件主要有三大“流

11、派”。一是微軟的ASF（“Advanced Stream Format”），這類文件的后綴是“.asf”和“.wmv”，與其對(duì)應(yīng)的播放器是“Windows Media Player”；二是Real Networks公司的“RealMedia”，其包括“Real Audio”、“Real Video”和“Real Flash”三類文件，其文件后綴名通常是“.rm”和“.rmvb”；三是蘋果公司的“Quick Time”，這類文件擴(kuò)展名通常是“.mov”，其對(duì)應(yīng)的播放器是“QuickTime”。通過使用“Real Player”控件，可以實(shí)現(xiàn)在Web頁面中播放“Real Audio”、“Real

12、Video”和“Real Flash”類型的流媒體。,15.4.1 在Web頁面中插入“Real Player”控件,在Web頁面中插入“Real Player”控件同樣是通過“object”標(biāo)記來實(shí)現(xiàn)的，例如： ,15.4.2 “Real Player”控件支持的屬性,“Real Player”控件支持的屬性有： （1）“AutoGotoURL”布爾型，設(shè)置或返回是否允許自動(dòng)響應(yīng)流數(shù)據(jù)中的URL操作。 （2）“AutoStart”布爾型，設(shè)置或返回當(dāng)媒體內(nèi)容可用時(shí)是否自動(dòng)開始播放。 （3）“Console”字符串型，設(shè)置或返回控件的控制臺(tái)名稱。 （4）“Controls”字符串型，設(shè)置或返回

13、控件顯示的組件，例如“PlayButton”和“StopButton”等。 （5）“Source”字符串型，設(shè)置或返回流媒體剪輯的地址（可以為“pnm:”、“file:”或“http:”等協(xié)議） （6）“WindowName”字符串型，設(shè)置或返回此控件的窗口名稱。,15.4.3 “Real Player”控件支持的方法,表15-13列出了“Real Player”控件支持的方法，通過這些方法，可以控制其的外觀樣式、播放進(jìn)程、音量大小等。 通過表中的方法可以看出?！癛eal Player”控件將所有的外觀樣式、流程控制、帶寬信息等均作為控件的方法來操作。,15.5 小結(jié),本章介紹了ActiveX

14、控件的含義，以及如何在HTML頁面中插入需要的ActiveX控件。詳細(xì)介紹了“Windows Media Player”和“Real Player”控件的使用方法，及各個(gè)控件支持的屬性和方法。以實(shí)例說明了如何通過腳本，實(shí)現(xiàn)對(duì)媒體播放的完全控制。,15.6 常見面試題分析,15.6.1 如何在HTML頁面中使用“ActiveX”控件 在HTML頁面中，使用“object”標(biāo)記來使用“ActiveX”對(duì)象。每個(gè)“object”對(duì)象至少需要指定一個(gè)“classid”屬性，來標(biāo)識(shí)此對(duì)象所引用的“ActiveX”控件。 “object”對(duì)象可以寫在HTML文檔的“head”或者“body”區(qū)域。處于“object”對(duì)象內(nèi)部的HTML文本，會(huì)被瀏覽器自動(dòng)的忽略。,15.6.2 什么是ActiveX控件,“A