http://blog.csdn.net/xy365/article/details/8230670
1. 大體的架構及流程
實現視頻點播系統，B/S架構，服務端至少應該是兩個服務器：流媒體服務器，web服務器。客戶端則就是web頁面。當開啓頁面後則是客戶端和服務器的第一次交互，通過http協議得到頁面。裏面會有流媒體地址的信息，瀏覽器裏面點擊顯示視頻組件，將流媒體的地址傳給流媒體播放器，並啓動播放器去請求視頻。這是第二次交互。服務器端流媒體服務器發送流給客戶端，頁面上播放就okay了。2. 環境及所需軟件
測試環境是xp sp2及IE 6瀏覽器。
服務端(IP地址：10.25.67.22)：
流媒體服務器先用個簡單的：live555 Media Server(http://www.live555.com/mediaServer/windows/live555MediaServer.exe)
Web服務器可以用Tomcat，IIS或者其他的Web服務器都可以。本文直接使用靜態頁面進行測試，不搭建Web服務。
客戶端(IP地址：10.25.67.100)：vlc-2.0.4的Activex ocx
3. 配置流媒體服務器
下載完live555 Media Server之後放到服務端D:/video目錄（需要保證在video目錄下有01.ts、02.mp3文件）下面，啓動時會有以下信息：
"Play streams from this server using the URL
rtsp://172.16.128.8/<filename>
where <filename> is a file present in the current directory."
並且後面還會有live555支持的視頻格式。本測試就用的mp3和ts格式。其他格式沒有試驗過。
mp3好說，ts怎麼得到呢？這時候vlc就出場了。vlc有轉換保存功能，媒體->轉換/保存->選擇某個文件後點擊轉換/保存->流輸出頁面勾選本地播放，勾選文件並且瀏覽得到個文件名，注意後綴爲ts而不是ps，方案封裝選MPEG-TS，然後點擊save。把你選擇的視頻播放一遍之後，ts格式的文件就生成好了。
將生成好的ts文件和網上下載的mp3放到d:/video下面，本測試爲01.ts及02.mp3。這樣流媒體服務器就配置好了。
4. 客戶端web頁面測試
本web頁面代碼是vlc的Activex測試代碼test.html上修改精簡的。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <script>
- var itemId = 0;
- function getVLC(name)
- {
- if (window.document[name])
- {
- return window.document[name];
- }
- if (navigator.appName.indexOf("Microsoft Internet")==-1)
- {
- if (document.embeds && document.embeds[name])
- return document.embeds[name];
- }
- else
- {
- return document.getElementById(name);
- }
- }
- function doGo(mrl)
- {
- var vlc = getVLC("vlc");
- itemId=vlc.playlist.add(mrl);
- vlc.playlist.playItem(itemId);
- document.getElementById("btn_stop").disabled = false;
- }
- function updateVolume(deltaVol)
- {
- var vlc = getVLC("vlc");
- vlc.audio.volume += deltaVol;
- }
- function doPlay()
- {
- vlc.playlist.playItem(itemId);
- document.getElementById("btn_stop").disabled = false;
- document.getElementById("btn_play").disabled = true;
- }
- function doStop()
- {
- getVLC("vlc").playlist.stop();
- document.getElementById("btn_stop").disabled = true;
- document.getElementById("btn_play").disabled = false;
- }
- </script>
- </head>
- <body>
- <div style="margin: 50px">
- <a title="rtsp://10.25.67.22/01.ts" href="#" onclick="doGo(this.title);return false;">01.ts</a>
- <span style="margin: 20px;" />
- <a title="rtsp://10.25.67.22/02.mp3" href="#" onclick="doGo(this.title);return false;">02.mp3</a>
- <span style="margin: 20px;" />
- </div>
- <div>
- <object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
- width="640"
- height="480"
- id="vlc"
- events="true">
- <param name="mrl" value="" />
- <param name="showdisplay" value="true" />
- <param name="autoloop" value="false" />
- <param name="autoplay" value="false" />
- <param name="volume" value="50" />
- <param name="starttime" value="0" />
- <embed pluginspage="http://www.videolan.org"
- type="application/x-vlc-plugin"
- version="videolan.vlcplugin.2"
- width="640"
- height="480"
- name="vlc">
- </embed>
- </object>
- </div>
- <div>
- <input type=button id="btn_play" value=" 播放 " onClick='doPlay();' disabled="true">
- <input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">
- <input type=button value="靜音切換" onclick='getVLC("vlc").audio.togglemute();'>
- <input type=button value="減小音量" onclick='updateVolume(-10)'>
- <input type=button value="增加音量" onclick='updateVolume(+10)'>
- </div>
- </body>
- </html>