PAGE1北京聯(lián)合大學(xué)實(shí)驗(yàn)（實(shí)習(xí)、實(shí)訓(xùn)）報(bào)告課程（項(xiàng)目）名稱：流媒體技術(shù)學(xué)院：師范學(xué)院專業(yè)：電子信息工程班級(jí)：09電2學(xué)號(hào)：2009020305223姓名：劉猛成績(jī)：2012年6月7日一、任務(wù)與目的1、課程簡(jiǎn)介《流媒體作品創(chuàng)作與發(fā)布綜合實(shí)訓(xùn)》課程緊密聯(lián)系流媒體技術(shù)的發(fā)展現(xiàn)狀，主要介紹為流媒體的基本知識(shí)、三大主流流媒體技術(shù)平臺(tái)、流媒體的制作、流媒體的發(fā)布與網(wǎng)絡(luò)傳輸、流媒體的下載及播放、流媒體硬件等內(nèi)容。本課程的先修課程為網(wǎng)絡(luò)技術(shù)基礎(chǔ)，后續(xù)課程為網(wǎng)絡(luò)教育資源制作。本實(shí)驗(yàn)課程部分是課堂理論教學(xué)的補(bǔ)充與延伸，具備很強(qiáng)的實(shí)踐性。求學(xué)生綜合運(yùn)用理論知識(shí)，對(duì)流媒體技術(shù)中的基本知識(shí)、工作原理有一定的了解，并對(duì)流媒體節(jié)目制作具有正確、熟練的操作技能。2、實(shí)驗(yàn)?zāi)康募耙蟆读髅襟w作品創(chuàng)作與發(fā)布綜合實(shí)訓(xùn)》課程實(shí)驗(yàn)，目的在于訓(xùn)練學(xué)生利用相關(guān)流媒體工具軟件進(jìn)行流媒體節(jié)目制作的基本能力，為以后其他專業(yè)課程的學(xué)習(xí)打好基礎(chǔ)。具體內(nèi)容包括WindowsMedia編碼器應(yīng)用；HelixProducer編碼器應(yīng)用；數(shù)字音頻的錄制與編輯；數(shù)字視頻采集與編輯；流媒體制作工具軟件應(yīng)用；音頻流媒體的制作；視頻流媒體的制作；流媒體課件制作；RealText流式文本文件制作；SMIL的應(yīng)用；流媒體轉(zhuǎn)換技術(shù)；流媒體下載與修復(fù)；流媒體服務(wù)器的安裝與配置；流媒體嵌入技術(shù)等。3.實(shí)驗(yàn)任務(wù)：我和高馬、梁家興和李雪亮一組制作一個(gè)網(wǎng)頁(yè)中嵌入流媒體的小型網(wǎng)站。其間我負(fù)責(zé)了網(wǎng)頁(yè)的制作，SMI文件的整合和優(yōu)化美化的工作。二、原理（條件）1、實(shí)驗(yàn)方式及要求本課程實(shí)驗(yàn)利用現(xiàn)有實(shí)驗(yàn)室網(wǎng)絡(luò)相關(guān)軟硬件系統(tǒng)，教師先進(jìn)行講解，操作演示，然后以學(xué)生分組實(shí)驗(yàn)的方式，進(jìn)行動(dòng)手實(shí)踐，要求學(xué)生實(shí)驗(yàn)前認(rèn)真預(yù)習(xí)實(shí)驗(yàn)指導(dǎo)材料，實(shí)驗(yàn)后認(rèn)真總結(jié)。利用RT、RM制作流式文本文件，綜合SMIL的應(yīng)用，以及鑲嵌在網(wǎng)頁(yè)中，實(shí)現(xiàn)在流媒體服務(wù)器中播放的效果。2、主要儀器設(shè)備1329現(xiàn)代教育實(shí)驗(yàn)室，WINXP+2000三、內(nèi)容與步驟（一）分組選題我與本班同學(xué)高馬、梁家興和李雪亮一組。鑒于最近電視里的《荒野求生》這一節(jié)目很熱，所以我們決定就以“荒野求生”為主題，利用RT、RP制作流式文件，綜合SMIL的應(yīng)用，以及鑲嵌在網(wǎng)頁(yè)中，實(shí)現(xiàn)在流媒體服務(wù)器中播放的效果。（二）制定方案1、前期構(gòu)思以“荒野求生”為主題，尋找一集視頻，并轉(zhuǎn)碼成RM，再找到相關(guān)的圖片、文字綜合成SMI文件，再嵌入到網(wǎng)頁(yè)中。2、收集篩選素材，制作流媒體文件通過(guò)前幾個(gè)小作業(yè)的學(xué)習(xí)，制作出帶有內(nèi)部熱區(qū)鏈接的Smi流媒體文件，并在SMI中嵌入RT、RM文件。設(shè)計(jì)網(wǎng)頁(yè)布局，將流媒體作品鑲嵌在網(wǎng)頁(yè)中，實(shí)現(xiàn)在流媒體服務(wù)器中播放的效果。3、整合作品將轉(zhuǎn)碼后的RM和制作好的網(wǎng)頁(yè)整合，將RT、RM合并為SMI也和網(wǎng)頁(yè)整合，優(yōu)化完善相關(guān)細(xì)節(jié)和參數(shù)發(fā)布安裝設(shè)置流媒體服務(wù)器、Web服務(wù)器、DNS服務(wù)器，發(fā)布網(wǎng)站（三）創(chuàng)作流媒體作品流程1.創(chuàng)建流式文本。通過(guò)RealText標(biāo)記性語(yǔ)言，可以創(chuàng)建RealNetwork系列的流式文本文件。這種類型的媒體對(duì)象可以在網(wǎng)上單獨(dú)發(fā)布，也可以和其它類型的流媒體文件，比如RealPix文件、視頻、聲音、Flash動(dòng)畫等，通過(guò)多媒體集成語(yǔ)言SMIL，組成流式多媒體節(jié)目。發(fā)布的方式可以通過(guò)RealServer進(jìn)行實(shí)時(shí)多點(diǎn)廣播，也可以存放在RealServer或WebServer上由用戶點(diǎn)播。2.選擇播放窗口風(fēng)格3.使用RealText、RealPix、SMIL標(biāo)記語(yǔ)言，編輯RealText、RealPix、SMIL文檔。4.將文件保存為純文本文件，使用后綴名.rt、.rp、.smi表示其為RealText、RealPix、SMIL文件。5.在本地機(jī)上，啟動(dòng)RealPlayer播放該文件，檢驗(yàn)所定義的播放效果是否正確。6.將文件保存到RealServer上。7.在網(wǎng)頁(yè)中，建立和SMIL文件的超鏈接。如果只發(fā)布RealText文件，那直接建立指向RealText文件的超鏈接。在瀏覽器中點(diǎn)擊鏈接，將啟動(dòng)RealPlayer，播放鏈接內(nèi)容。也可以選擇用瀏覽器來(lái)播放SMIL或RealText文件，這樣就不需要另外啟動(dòng)RealPlayer。四、數(shù)據(jù)處理（現(xiàn)象分析）我主要負(fù)責(zé)SMI文件整合、網(wǎng)頁(yè)制作這兩方面。1、SMI文件整合(最終效果如下圖)配色的決定：制作前首先我想到的是怎樣實(shí)現(xiàn)將SMI和網(wǎng)頁(yè)的結(jié)合盡可能自然。由于網(wǎng)站是黑白配，所以果斷決定也用黑白色的SMI背景的美化：先去BAIDU圖片找到滿意的圖片，再在PHOTOSHOP中將這幅圖片用濾鏡改成黑白配色，再對(duì)四邊應(yīng)用羽化效果，實(shí)現(xiàn)圖片邊框到網(wǎng)頁(yè)的漸變，如圖3）熱區(qū)鏈接的確定：將RT和RP結(jié)合在一個(gè)SMI中就要用到SMI文件中的鏈接，而對(duì)RT和RP分別制作SMI文件，并在文件中設(shè)置到另一個(gè)SMI文件的鏈接即可實(shí)現(xiàn)只有RT或RP內(nèi)容改變而其他均不變的效果，如何查看熱區(qū)點(diǎn)的坐標(biāo)可以利用PHOTOSHOP軟件，打開信息窗口面板，將鼠標(biāo)放在點(diǎn)上，面板中就顯示出坐標(biāo)，需要單擊左面的十字，把單位改成像素。如圖這樣就可以確定每個(gè)需要定義鏈接的熱區(qū)的“左上”和“右下”這兩個(gè)點(diǎn)的Ｘ,Ｙ坐標(biāo)，也就可以確定矩形熱區(qū)了SMI中的熱區(qū)代碼：<anchorhref="rt.smi"coords="67,110,363,160"show="replace"/><anchorhref="rp.smi"coords="67,195,363,242"show="replace"/>Replace的意思代表的是在原窗口中以“代替”方式打開新內(nèi)容4）RT、RP文件的美化：a.起初RP文件的圖片切換很不自然，我仿照電子書對(duì)代碼進(jìn)行了如下修改（截取片段）： <imagehandle="1"name="5.jpg"/> <imagehandle="2"name="2.jpg"/> <imagehandle="3"name="3.jpg"/> <imagehandle="4"name="4.jpg"/> <imagehandle="5"name="5.jpg"/> <imagehandle="6"name="6.jpg"/> <wipetype="normal"direction="right"start="1"duration="3"target="1"/> <wipetype="normal"direction="left"start="4"duration="3"target="2"/> <wipetype="normal"direction="down"start="7"duration="3"target="3"/> <wipetype="push"direction="right"start="10"duration="3"target="4"/> <wipetype="push"direction="up"start="13"duration="3"target="5"/>這樣就能實(shí)現(xiàn)圖片從上下左右頂入的效果，效果較為自然。為了和背景更為呼應(yīng)，背景色改為了透明，這樣在演示圖片時(shí)就實(shí)現(xiàn)放映電影一樣的效果（黑色）代碼：bgcolor="transparent"b.為了更具統(tǒng)一性，RT文件的背景也設(shè)置為了深灰色代碼：bgcolor="#1b1b1b"5）整合為SMI：想要完美整合RT、RP到SMI中就需要把同組人制作好的文件做一些修改，比如meet這個(gè)參數(shù)值基本都要改成fill（fit="meet"），以保證拉伸充滿演示框而不留“白邊”SMI中相關(guān)代碼：（1）SMIL程序以<smil>開始，以</smil>結(jié)束。（2）整個(gè)程序由body和head兩個(gè)部分組成。（3）屬性和標(biāo)記要求小寫。（4）有些標(biāo)記必須有一斜杠作為結(jié)束標(biāo)記。（5）屬性值必須用雙引號(hào)括起來(lái)（6）SMIL文件的拓展名為*.smil或者*.smi（7）fill屬性，當(dāng)演示中的某個(gè)片斷播放完成以后，可以用fill屬性來(lái)規(guī)定它的顯示狀態(tài)。（8）附加信息寫在<head></head>之間。有些關(guān)于源代碼的一些說(shuō)明就是附加信息，例如版權(quán)、作者、標(biāo)題、基地址等，可以在<head></head>中說(shuō)明。其基本的格式是：<metaname=""content=""/><metaname="base"content="rtsp://0/"/>是在<head></head>中用附加信息的方式規(guī)定了整個(gè)smil文件的基地址為rtsp://0/。規(guī)定了基地址，在用該地址下的文件的時(shí)候，就只需要給出路徑即可。（9）用<!--…-->進(jìn)行注釋（10）repeat屬性，再演示中的某個(gè)片斷或者全部的片斷重復(fù)播放若干次，可用repeat屬性來(lái)實(shí)現(xiàn)該效果。（11）布局標(biāo)記必須以<layout>開頭，以</layout>結(jié)束，其他具體的標(biāo)記都在這中間。<layout></layout>必須放在<head></head>之間。（12）root-layout標(biāo)記表明的是規(guī)定最基本的、最底層的窗口。其他一切窗口都在它的基礎(chǔ)上劃分出來(lái)。（13）width=""表明窗口寬為幾個(gè)像素點(diǎn)；height=""表明窗口高為幾個(gè)像素點(diǎn)；background-color=""表明窗口的背景顏色。（16）fit屬性，使用恰當(dāng)?shù)亩嗝襟w片斷和窗口的匹配方式“meet”。（17）<par></par>標(biāo)記在<par></par>中間的多媒體片斷并行播放。（18）<regionid="video"title="video"left="10"top="10"width="400"height="300"fit="meet"background-color="#ffffff"/>定義視頻播放窗口video，從左上角開始，窗口大小為400*300，在其中播放的視頻文件大小自動(dòng)調(diào)整，以適合窗口大小。（19）<regionid="text"title="text"left="420"top="10"width="500"height="300"fit="meet"background-color="#ffffff"/>定義教師講稿窗口text，窗口位置從左上角往左420像素開始，大小為500*300，窗口大小與rt文件中定義的一致。（20）<regionid="main"title="main"top="300"left="10"width="400"height="200"fit="meet"background-color="#ffffff"/>定義作品作者信息窗口text，窗口位置從左上角往下300像素開始，大小為400*200，窗口大小與rt文件中定義的一致。（21）<regionid="marquee"title="marquee"top="460"left="10"height="100"fit="meet"background-color="#ffffff"/>定義作品名稱滾動(dòng)字幕窗口marquee，窗口位置從左上角往下460像素開始，高大小為100，窗口大小與rt文件中定義的一致。首頁(yè)網(wǎng)頁(yè)制作（各頁(yè)效果圖如下）首頁(yè)分頁(yè)面1分頁(yè)面2"聯(lián)系我們"頁(yè)面分頁(yè)面1分頁(yè)面2"聯(lián)系我們"頁(yè)面網(wǎng)站LOGO在PHOTOSHOP中的繪制：，采取左側(cè)和上側(cè)頂頭的效果，更具藝術(shù)感在網(wǎng)頁(yè)中插入SMI或RM的代碼(插入到BODY標(biāo)簽中)：<OBJECTid=RAOCXheight="640"width="880"classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA><PARAMNAME="SRC"VALUE="real/rt.smi"><PARAMNAME="CONSOLE"VALUE="Clip1"><PARAMNAME="CONTROLS"VALUE="imagewindow"><PARAMNAME="AUTOSTART"VALUE="true"><embedsrc="real/rt.smi"autostart="True"controls="imagewindow"console="Clip1"pluginspage=""height="640"width="880"></embed></OBJECT>聯(lián)系我們頁(yè)面中調(diào)用百度地圖的代碼（可實(shí)現(xiàn)聯(lián)網(wǎng)狀態(tài)下顯示我們學(xué)校在地圖中的位置）：HEAD中：<scripttype="text/javascript"src="/api?key=&v=1.1&services=true"></script>BODY中（片段截?。?lt;scripttype="text/javascript">//創(chuàng)建和初始化地圖函數(shù)：functioninitMap(){createMap();//創(chuàng)建地圖setMapEvent();//設(shè)置地圖事件addMapControl();//向地圖添加控件addMarker();//向地圖中添加marker}//地圖控件添加函數(shù)：functionaddMapControl(){//向地圖中添加縮放控件 varctrl_nav=newBMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav);//向地圖中添加縮略圖控件 varctrl_ove=newBMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0}); map.addControl(ctrl_ove);//向地圖中添加比例尺控件 varctrl_sca=newBMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca