|
1.流媒體簡(jiǎn)介
多媒體信息的數(shù)據(jù)量很大，在網(wǎng)絡(luò)上傳輸音/視頻等信息主要有下載和流式傳輸兩種方案，流式傳輸采用的是邊接收邊播放的原則，即數(shù)據(jù)流由流媒體服務(wù)器向用戶計(jì)算機(jī)連續(xù)、實(shí)時(shí)地傳送，客戶機(jī)不必等到
整個(gè)文件全部下載完畢，只需經(jīng)過幾秒或十?dāng)?shù)秒的啟動(dòng)延時(shí)即可進(jìn)行觀看，采用一邊播放，一邊下載，一邊丟棄的方式，節(jié)省了客戶端存儲(chǔ)空間，有效的利用了帶寬，并真正實(shí)現(xiàn)作品知識(shí)產(chǎn)權(quán)保護(hù)。
實(shí)現(xiàn)流媒體傳輸需要2個(gè)條件：支持流式傳輸?shù)牧髅襟w服務(wù)器和能流式傳輸?shù)牧髅襟w文件。目前主要有三家流媒體公司在這方面占主導(dǎo)市場(chǎng)：
(1)Microsoft公司的WindowsMedia
http://www.microsoft.com/windows/windowsmedia/
(2) RealNetworks公司的RealMedia
http://www.
(3) Apple公司的QuickTime
http://www.apple.com/quicktime/download/
圖1為流媒體網(wǎng)絡(luò)播放的過程。
圖1 流媒體傳輸原理
2.流媒體文件的網(wǎng)上發(fā)布方式
與圖片文字不同的是，瀏覽器本身不能播放流媒體文件，需要插件或安裝播放器，常用的播放器如Windows Media Player或Real Player可到相應(yīng)的站點(diǎn)都提供免費(fèi)下載使用。
流媒體文件頁面發(fā)布一般有2種方式：頁面鏈接和頁面嵌入。采用頁面嵌入式，播放器成為頁面的一個(gè)基元，影片或聲音無間隙地內(nèi)嵌在網(wǎng)頁中，當(dāng)頁面打開時(shí)便可自動(dòng)播放，其好處主要有：(1)設(shè)計(jì)者可以完全控制播放器的外觀和功能，也就可以自由設(shè)計(jì)播放器的尺寸，在頁面中位置，可以使用的按紐，播放指定的唯一文件，與頁面實(shí)現(xiàn)無縫結(jié)合。(2)通過頁面腳本語言JavaScript或VBScript來控制播放器，可以創(chuàng)建自定義的播放器外觀和實(shí)現(xiàn)特殊功能，例如實(shí)現(xiàn)頁面點(diǎn)唱機(jī)功能。
對(duì)于Windows Media 還是Real Media視頻文件都包括2個(gè)文件：一個(gè)為視頻源文件，一個(gè)為指向源文件的指針文件，利用指針文件來重定向流信息的主要原因是：目前通用的客戶端瀏覽器通常均不能直接支持用于播放流信息的MMS協(xié)議或RTSP協(xié)議，需要向流媒體服務(wù)器發(fā)出請(qǐng)求，由Media Server以流式傳輸方式播放指針文件中指定的視頻源文件。本文以Windows Media為例說明其實(shí)現(xiàn)方法[1]。
在頁面加入視頻最簡(jiǎn)單的方法就是在頁面中用HTML語言加入指向Web Server的指針文件，先使用文本編輯器生成yourfile.asx指針文件，它是純文本文件，其中代碼如下：
<ASX version="3.0">
<TITLE>yourfile.asx</TITLE>
<ENTRY>
<TITLE>A Simple ASX</TITLE>
<AUTHOR>Your Name</AUTHOR>
<REF HREF="mms:// windows media server/sample.asf"/>
</ENTRY>
</ASX>
它的<entry></entry>可以有多個(gè)，表示有多個(gè)流要播放，也就是播放列表，每個(gè)<entry></entry>之間還有屬于每個(gè)流的相關(guān)信息包括TITLE，AUTHOR，COPYRIGHT等。生成yourfile.asx文件后，把它上傳到Web Server，且要和播放頁面在同一個(gè)路徑下。
嵌入式頁面在IE采用的是ActiveX Control技術(shù)，對(duì)Netscape Navigator而是采用plug-in技術(shù)。要實(shí)現(xiàn)流媒體直接在頁面中播放，先用上述方法創(chuàng)建asx指針文件，或者可以用同一個(gè)asx，具體實(shí)現(xiàn)的話，如在Microsoft FrontPage中，通過插入Windows Media Player 這個(gè)ActiveX控件，在HTML中BODY項(xiàng)中將會(huì)自動(dòng)生成<object > </object>代碼，如下所示。 你所要做的就是根據(jù)你的要求更改Param項(xiàng)參數(shù)，其中Param項(xiàng)的FileName參數(shù)指向流媒體文件的指針文件asx，即http://server/path/your-file.asx，各參數(shù)項(xiàng)根據(jù)自己要求設(shè)置。
<object id="MediaPlayer1" width=180 height=200
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft? Windows? Media Player components..."
type="application/x-oleobject" align="middle">
<param name="FileName" value="server/path/your-file.asx ">
<param name="ShowStatusBar" value="True">
<param name="DefaultFrame" value="mainFrame">
<embed type="application/x-mplayer2"
pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
src=" http://server/path/your-file.asx " align="middle"
width=176
height=144
autostart=1
showcontrols=0>
</embed>
</object>
播放窗口適宜大小:
|
窗口大小 |
傳輸速率 |
|
Width=160 height=120 |
適合28.8kbps |
|
Width=240 height=160 |
適合56kbps |
|
Width=320 height=240 |
適合高于100kbps ,全屏要達(dá)到300kbps. |
3.具體實(shí)現(xiàn)
Media Player做為一個(gè)ActiveX對(duì)象，有很多的屬性（Property）和方法（Method）可以供Web頁使用，如果與JavaScript結(jié)合的話，可以實(shí)現(xiàn)更復(fù)雜的功能，具體用到了Media Player的Play( ), Pause( ), stop( ) 方法實(shí)現(xiàn)播放、暫停、停止操作，利用Media Player的displaySize、showControls、fileName屬性控制播放窗口大小、按鈕的可見、改變播放的媒體文件，由于Media Player對(duì)象的屬性和方法太多，我們不可能在此一一介紹，用戶在使用時(shí)可以參考Media Player SDK[2]的幫助文檔以獲取更多的信息。本文利用JavaScript語言結(jié)合Media Player的屬性和方法實(shí)現(xiàn)了一個(gè)流媒體嵌入式頁面點(diǎn)唱機(jī)功能。
點(diǎn)唱機(jī)的完整代碼如下：
<HTML><HEAD>
<TITLE>嵌入式流媒體頁面點(diǎn)唱機(jī)</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--先定義流媒體文件結(jié)構(gòu)，加入欲播放的流媒體文件-->
var streams = new Array();
streams[0] = new makeStream("http://server/path/your-file.asx", "Your Movie Name");
streams[1] = new makeStream("mms:// windows media server/sample.asf ", "Sample Movie");
function makeStream(url, name) {
this.url = url;
this.name = name;
}
function handleControlsOnOffClick() {
if (document.mediaPlayer.showControls == true) {
document.mediaPlayer.showControls = false;
document.playerCtrl.controls.value = " 顯示控件 ";
}
else { document.mediaPlayer.showControls = true;
document.playerCtrl.controls.value = " 隱藏控件 "
}
}
function handlePlayOrPauseClick(){
var state;
playerStatus = document.mediaPlayer.playState;
if (playerStatus == 6) {
document.mediaPlayer.play();
document.playerCtrl.playOrPause.value = " 暫停 ";
}
else if (playerStatus == 1) {
document.mediaPlayer.play();
document.playerCtrl.playOrPause.value = " 暫停 ";
}
else if (playerStatus == 2) {
document.mediaPlayer.pause();
document.playerCtrl.playOrPause.value = " 播放 ";
}
}
function changeSize(newSize) {
document.mediaPlayer.displaySize = newSize;
}
<!--當(dāng)用戶改變欲播放的流媒體文件時(shí),調(diào)用Media Player的stop( )方法,把URL地址賦值到Media Player的fileName參數(shù)中,Media Player重新開始播放-->
function change() {
var list = document.playerCtrl.streams;
var streamURL = list.options[list.selectedIndex].value;
document.mediaPlayer.stop();
document.playerCtrl.playOrPause.value = " 暫停 ";
document.mediaPlayer.fileName = streamURL;
}
</SCRIPT>
</HEAD>
<BODY LEFTMARGIN = "100">
<h3>嵌入式流媒體頁面點(diǎn)唱機(jī)</h3><P>
<OBJECT
ID="mediaPlayer"
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
STANDBY="Loading Microsoft Windows Media Player components..."
TYPE="application/x-oleobject" width="286" height="225">
<PARAM NAME="fileName" VALUE=" server/path/your-file.asx ">
<PARAM NAME="animationatStart" VALUE="true">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="autoStart" VALUE="true">
<PARAM NAME="showControls" VALUE="true">
</OBJECT><P>
<FORM NAME="playerCtrl">
<INPUT TYPE="button" VALUE="暫停" NAME="playOrPause" onClick="handlePlayOrPauseClick()" STYLE = "font-family:courier">
<INPUT TYPE="button" VALUE="隱藏控件" NAME="controls" onClick="handleControlsOnOffClick()" STYLE = "font-family:courier"><BR>
<INPUT TYPE="button" VALUE="小屏幕" NAME="small" onclick="changeSize(1)" STYLE="font-family:courier"><INPUT TYPE="button" VALUE="原始大小" NAME="normal" onclick="changeSize(0)" STYLE="font-family:courier"><INPUT TYPE="button" VALUE="大屏幕" NAME="large" onclick="changeSize(2)" STYLE="font-family:courier">
<p>選擇播放的電影
<SCRIPT LANGUAGE="JavaScript">
<!--當(dāng)用戶從從下拉列表中選擇想播放的流媒體文件后，獲取該文件的URL和Name-->
with (document) {
writeln('<SELECT NAME="streams" onChange="change()">');
for (var i = 0; i < streams.length; i++) {
writeln('<OPTION VALUE="', streams[i].url, '">', streams[i].name);
}
writeln('</SELECT>');
}
</SCRIPT>
</p>
</FORM> </BODY> </HTML>
其中播放列表中的流媒體文件,根據(jù)定義包括url（指向媒體文件網(wǎng)絡(luò)地址）和name（頁面顯示的文件名），可以根據(jù)要求加入多個(gè)不同地址的媒體文件，指向的媒體文件可以是ASX和ASF的2種類型，其寫法不一樣，采用ASX索引文件用http協(xié)議指向?qū)?yīng)的索引文件地址，采用ASF媒體文件用mms流媒體傳輸協(xié)議直接播放指向的媒體文件。圖2為具體實(shí)現(xiàn)的一個(gè)例子。
圖2頁面嵌入式流媒體點(diǎn)唱機(jī)實(shí)現(xiàn)
4.結(jié)束語
本文對(duì)Media Service的客戶應(yīng)用程序Media Player在Web頁面中的使用做了簡(jiǎn)單的介紹，結(jié)合JavaScript語言具體實(shí)現(xiàn)了一個(gè)頁面嵌入式點(diǎn)唱機(jī)程序，可以實(shí)現(xiàn)流媒體文件的選擇打開和播放，該例子應(yīng)用在音樂和視頻點(diǎn)播網(wǎng)站可以更好的保護(hù)作者的版權(quán)。 | 
