用JavaScript js 控制 Media Player 流媒體

在Web頁中嵌入Media Player的方法比較簡單，只要用HTML中的可以了，如下所示。<br />CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"<br />CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/<br />nsmp2inf.cab#Version=6,4,5,715"<br />STANDBY="Loading Microsoft? Windows Media? Player components..."<br />TYPE="application/x-oleobject"><br />其中ID是對象的名稱，當使用者在JavaScript要對Media Player進行控制時可以用該對象的名稱WMPlay進行訪問。CODEBASE指明當使用者的瀏覽器中沒有安裝Player控制項時可以從該URL指定的位置去擷取。<br />當然在建立Player對象時也可以用來為其指定參數。<br />其中"FileName"參數表示Media Player要播放的檔案活或流。"ShowControls"表示在播放時是否顯示控制條。Media Player的參數很多，我們在此不再一一詳述。讀者如果需要瞭解更詳細的內容可以參考Media Player SDK中的相關部分。<br />如果使用者需要對Media Player進行控制可以用JavaScript進行控制。 </p><p>在這個例子中，Media Player嵌入在Web頁面中，在Media Player右邊有一些按鈕，利用這些按鈕使用者可以控制Media Player的播放活動。這些按鈕的HTML代碼如下：<br />OnClick="controlType(false)"><br />Onclick="controlType(true)"><br />OnClick="displaySize(1)"><br />Onclick="displaySize(2)"><br />Onclick="displaySize(0)"><br />Onclick="PlayClick()"><br />Onclick="StopClick()"> </p><p>從這個例子可以看出當使用者單即其中的某個按鈕時，它對應的OnClick函數將被調用。在JavaScript函數中，可以直接用WMPlay來控制播放器的活動，比如開始播放，停止播放或占停播放，以及放大縮小等。<br />除了可以用動作比如滑鼠的動作來對嵌入的Media Player進行控制外，還可以利用事件來對其進行控制。Microsoft Windows Media Player 支援的事件很多，有普通的滑鼠事件，比如滑鼠的單擊、雙擊、滑鼠的移動、滑鼠鍵的按下與鬆開等，也有一些是Media Player特有的事件。與流播放有直接關係的事件有：OpenStateChange，PlayStateChange，Buffering，MarkerHit，ScriptCommand等。下面我們對這幾個重要的事件做簡單地介紹。<br />1 OpenStateChange 事件<br />OpenStateChange 事件表示Player的狀態已經發生了改變。Media Player的開啟狀態有：<br />0 表示流已經關閉（nsClosed）<br />1 表示正在裝入ASX檔案（nsLoadingASX）<br />2 表示正在裝入NSC檔案（nsLoadingNSC）<br />3 表示正在尋找Media Server （nsLocating）<br />4 表示正在與Media Server建立串連（nsConnecting）<br />5 表示正在開啟或偵聽流資訊（nsOpening）<br />6 表示流資訊已經開啟（nsOpen） </p><p>其中MediaPlayer是在中定義的Media Player對象時的名字。 </p><p>2 PlayStateChange 事件<br />PlayStateChange 事件表示Media Player的播放狀態已經改變，Media Player可能的狀態有：<br />0 播放已經停止（mpStopped）<br />1 播放暫停（mpPaused ）<br />2 現正播放（mpPlaying）<br />3 正在等待流開始（mpWaiting）<br />4 向前搜尋（mpScanForward）<br />5 向後搜尋（mpScanReverse）<br />6 向前跳躍（mpSkipForward）<br />7 向後跳躍（mpSkipReverse）<br />8 流已經關閉（mpClosed）<br />用JavaScript處理該事件的方法為： </p><p>3 Buffering 事件<br />Buffering事件表示Media Player正在緩衝資料準備播放。在進行流播放之前，Media Player必須要緩衝一定數量的資料之後才開始播放，Buffering事件反映了Player緩衝資料的狀況。用JavaScript處理Buffering事件的方法為：<br />其中bStart為一個布爾變數，當它為TRUE時表示緩衝進行中，反之表示緩衝已經結束。 </p><p>4 ScriptCommand 事件<br />ScriptCommand事件表示Media Player接收到了Script 命令，這時使用者可以利用對接收到Script命令進行分析以決定採取相應的處理。我們知道利用Media Tools的ASF Indexer工具可以給流添加Script命令，當流播放器Player接收到這些Script 命令時會啟用這個事件處理方法，於是使用者可以在事件處理方法中對Script命令進行處理。處理ScriptCommand的方法是：<br />其中sType是Script命令的類型，Script命令的類型有URL，TEXT，EVENT等，使用者可以根據Script命令類型的不同做不同的處理。比如，如果是URL命令，我們可以在指定的幀內開啟sParam中指定的頁面。 </p><p>5 MarkHit 事件<br />MarkerHit事件同ScritpCommand事件一樣，當媒體播放器在ASF流中遇到標記時會啟用該事件，使用者利用該事件可以知道當前的標記是第幾個標記。MarkerHit事件的處理方法是：<br />當然，除了支援事件處理之外，做為一個ActiveX對象，Media Player還有很多的屬性（Property）和方法（Method）可以供Web頁使用。比如用MediaPlayer.MarkerCount 屬性可以知道在ASF流中到底有多少個標記；利用MediaPlayer. CurrentPosition屬性可以知道當前播放位置的時間等等。至於Media Player對象的方法我們在前面已經使用了很多，比如Play（）, Pause（）等均是Media Player的方法。由於Media Player對象的屬性和方法太多，我們不可能在此一一介紹，而只是對幾個較為重要的事件處理做了一定的介紹。使用者在使用時可以參考Media Player SDK的協助文檔以擷取更多的資訊。<br />本文對Media Service的客戶應用程式Media Player的使用，特別是在Web頁中的使用做了簡單的介紹。作為一個通用的媒體播放器，它還有很多的功能這裡沒有介紹，要瞭解一個軟體的功能，最好的方法就是使用它。使用者如果感興趣可以從www.windowsmedia.com上去免費下載。 </p><p>播放: MediaPlayer.Play()<br />暫停: MediaPlayer.Pause()<br />定位: MediaPlayer.SetCurrentEntry(lWhichEntry)<br /> MediaPlayer.Next()<br /> MediaPlayer.Previous()<br />迴圈: MediaPlayer.PlayCount = 0<br />0:the clip plays repeatedly<br />1:once<br />停止: MediaPlayer.Stop() </p><p>AllowChangeDisplaySize 返回或設定終端使用者是否能設定顯示尺寸(邏輯型)<br />AllowScan 返回或設定是否允許掃描(邏輯型)<br />AnimationAtStart 返回或設定控制項開始播放之前是否先播放一個動畫序列(邏輯型)<br />AudioStream 返回或設定音頻流的編號(用於多音頻流的剪輯，預設為-1)(長整型)<br />AutoRewind 返回或設定媒體檔案播放完畢後是否自動迴繞(邏輯型)<br />AutoSize 返回或設定是否自動調整控制項大小來適應載入的媒體(邏輯型)<br />AutoStart 返回或設定在載入媒體檔案之後是否自動開始播放(邏輯型)<br />Balance 返回或設定指定立體聲媒體檔案的播放聲道(-10000為左聲道，10000為右聲道，0為立體聲)(長整型)<br />Bandwidth 返回或設定當前檔案的頻寬(長整型)<br />BaseURL 返回基本的 HTTP URL(字串)<br />BufferingCount 返回媒體檔案回放時緩衝的總時間(長整型)<br />BufferingProgress 返回緩衝完成的百分比(長整型)<br />BufferingTime 返回緩衝的時間(雙精確度型)<br />CanPreview 返回或設定當前顯示的剪輯是能否被預覽(邏輯型)<br />CanScan 返回或設定當前檔案是否支援快進或快退(邏輯型)<br />CanSeek 返回或設定當前檔案是否能搜尋並定位到某個時間(邏輯型)<br />CanSeekToMarkers 返回或設定檔案是否支援搜尋到標籤(邏輯型)<br />CaptioningID 返回在標題中顯示的幀或控制項的名稱(字串)<br />ChannelDescription 返回電台的描述(字串)<br />ChannelName 返回電台的名稱(字串)<br />ChannelURL 返回電台的元檔案的位置(字串)<br />ClickToPlay 返回或設定是否可以通過點擊映像暫停或播放剪輯(邏輯型)<br />ClientID 返回用戶端唯一的標識符(字串)<br />CodecCount 返迴文件使用的可安裝的 codecs 的個數(長整型)<br />ContactAddress 返回電台的聯絡地址(字串)<br />ContactEmail 返回電台的聯絡電子郵件地址(字串)<br />ContactPhone 返回電台的聯絡電話(字串)<br />CreationDate 返回剪輯的建立日期(日期型)<br />CurrentMarker 返回或設定當前書籤號碼(長整型)<br />CurrentPosition 返回或設定剪輯的當前位置(雙精確度型)<br />CursorType 返回或設定指標類型(長整型)<br />DefaultFrame 返回或設定控制項的預設目標 Http 幀(字串)<br />DisplayBackColor 返回或設定顯示面板的背景色(OLE_COLOR 值)<br />DisplayForeColor 返回或設定顯示面板的前景色彩(OLE_COLOR 值)<br />DisplayMode 返回或設定顯示面板是否用秒或幀的形式顯示當前位置(MPDisplayModeConstants 值)<br />DisplaySize 返回或設定映像顯示視窗的大小(MPDisplaySizeConstant 值)<br />Duration 返回或設定剪輯剪輯的播放時間(雙精確度型)<br />EnableContextMenu 返回或設定是否允許使用操作功能表(邏輯型)<br />Enabled 返回或設定控制項是否可用(邏輯型)<br />EnableFullScreenControls 返回或設定全螢幕控制是否可用(邏輯型)<br />EnablePositionControls 返回或設定位置控制是否可用(邏輯型)<br />EnableTracker 返回或設定搜尋欄控制是否可用(邏輯型)<br />ErrorCode 返回當前錯誤碼(長整型)<br />ErrorCorrection 返回當前剪輯的錯誤修正類型(長整型)<br />ErrorDescription 返回當前錯誤的描述(字串)<br />FileName 返回或設定要播放的剪輯的檔案名稱(字串)<br />HasError 返回控制項是否發生錯誤(邏輯型)<br />HasMultipleItems 返回或設定控制項是否包含某些多重項目的內容(邏輯型)<br />ImageSourceHeight 返回或設定當前剪輯的原始映像高度(長整型)<br />ImageSourceWidth 返回或設定當前剪輯的原始映像寬度(長整型)<br />InvokeURLs 返回或設定 URL 是否自動發送請求(邏輯型)<br />IsBroadcast 返回或設定源是否進行廣播(邏輯型)<br />IsDurationValid 返回或設定期間值是否有效(邏輯型)<br />Language 返回或設定用於本地化語言支援的目前範圍語言(長整型)<br />LostPackets 返回丟失的資料包數量(長整型)<br />MarkerCount 返迴文件書籤的數量(長整型)<br />Mute 返回或設定控制項是否播放聲音(邏輯型)<br />OpenState 返回控制項的內容來源狀態(長整型)<br />PlayCount 返回或設定一個剪輯播放的次數(長整型)<br />PlayState 返回控制項的當前操作狀態(長整型)<br />PreviewMode 返回或設定控制項是否處在預覽模式(邏輯型)<br />Rate 返回或設定回放幀頻(雙精確度型)<br />ReadyState 返回控制項是否準備就緒(ReadyStateConstant 值)<br />ReceivedPackets 返回已接收到的資料包的數量(長整型)<br />ReceptionQuality 返回最後 30 秒接收到的資料包的百分比(長整型)<br />RecoveredPackets 返回已轉換的資料包的數量(長整型)<br />SAMIFileName 返回或設定 closed-captioning 檔案名稱(字串)<br />SAMILang 返回或設定 closed captioning 語言(字串)<br />SAMIStyle 返回或設定 closed captioning 風格(字串)<br />SelectionEnd 返回或設定流的結束位置(雙精確度型)<br />SelectionStart 返回或設定流的起始位置(雙精確度型)<br />SendErrorEvents 返回或設定控制項是否發送錯誤事件(邏輯型)<br />SendKeyboardEvents 返回或設定控制項是否發送鍵盤事件(邏輯型)<br />SendMouseClickEvents 返回或設定控制項是否發送按一下滑鼠事件(邏輯型)<br />SendMouseMoveEvents 返回或設定控制項是否發送滑鼠移動事件(邏輯型)<br />SendOpenStateChangeEvents 返回或設定控制項是否發送開啟狀態改變事件(邏輯型)<br />SendPlayStateChangeEvents 返回或設定控制項是否發送播放狀態改變事件(邏輯型)<br />SendWarningEvents 返回或設定控制項是否發送警告事件(邏輯型)<br />ShowAudioControls 返回或設定是否顯示音頻控制(邏輯型)<br />ShowCaptioning 返回或設定是否顯示字幕(邏輯型)<br />ShowControls 返回或設定控制台是否可見(邏輯型)<br />ShowDisplay 返回或設定是否顯示顯示面板(邏輯型)<br />ShowGotoBar 返回或設定是否顯示跳轉欄(邏輯型)<br />ShowPositionControls 返回或設定是否顯示位置控制(邏輯型)<br />ShowStatusBar 返回或設定是否顯示狀態列(邏輯型)<br />ShowTracker 返回或設定是否顯示搜尋欄(邏輯型)<br />SourceLink 返回內容檔案的路徑(字串)<br />SourceProtocol 返回用於接收資料的協議(長整型)<br />StreamCount 返回媒體幀的數量(長整型)<br />TransparentAtStart 返回或設定在開始播放之前和停止之後控制項是否透明(邏輯型)<br />VideoBorder3D 返回或設定視頻邊框是否顯示為 3D 效果(邏輯型)<br />VideoBorderColor 返回或設定視頻邊框的顏色(OLE_顏色)<br />VideoBorderWidth 返回或設定視頻邊框的寬度(長整型)<br />Volume 返回或設定音量(長整型) </p><p>Mediaplayer屬性和方法<br />屬性/方法名：說明：<br />[基本屬性] 　<br />URL:String; 指定媒體位置，本機或網路地址<br />uiMode:String; 播放器介面模式，可為Full, Mini, None, Invisible<br />playState:integer; 播放狀態，1=停止，2=暫停，3=播放，6=正在緩衝，9=正在串連，10=準備就緒<br />enableContextMenu:Boolean; 啟用/禁用右鍵菜單<br />fullScreen:boolean; 是否全螢幕顯示<br />[controls] wmp.controls //播放器基本控制<br />controls.play; 播放<br />controls.pause; 暫停<br />controls.stop; 停止<br />controls.currentPosition:double; 當前進度<br />controls.currentPositionString:string; 當前進度，字串格式。如“00:23”<br />controls.fastForward; 快進<br />controls.fastReverse; 快退<br />controls.next; 下一曲<br />controls.previous; 上一曲<br />[settings] wmp.settings //播放器基本設定<br />settings.volume:integer; 音量，0-100<br />settings.autoStart:Boolean; 是否自動播放<br />settings.mute:Boolean; 是否靜音<br />settings.playCount:integer; 播放次數<br />[currentMedia] wmp.currentMedia //當前媒體屬性<br />currentMedia.duration:double; 媒體總長度<br />currentMedia.durationString:string; 媒體總長度，字串格式。如“03:24”<br />currentMedia.getItemInfo(const string); 擷取當前媒體資訊"Title"=媒體標題，"Author"=藝術家，"Copyright"=著作權資訊，"Description"=媒體內容描述，"Duration"=期間（秒），"FileSize"=檔案大小，"FileType"=檔案類型，"sourceURL"=原始地址<br />currentMedia.setItemInfo(const string); 通過屬性名稱設定媒體資訊<br />currentMedia.name:string; 同 currentMedia.getItemInfo("Title")<br />[currentPlaylist] wmp.currentPlaylist //當前播放清單屬性<br />currentPlaylist.count:integer; 當前播放清單所包含媒體數<br />currentPlaylist.Item[integer]; 擷取或設定指定項目媒體資訊，其子屬性同wmp.currentMedia