我這邊是選用 VLC Player Plug-in
主要原因是因為它可以跨瀏覽器支援
在IE、FireFox、Chrome 上都可以使用
在寫程式之前，要先測試RTSP的串流是否有正常的發送
可以先下載VLC media player來進行測試
媒體 -> 開啟網路串流
在裡面輸入要測試的RTSP串流的位址
接著來完成網頁的部分
其實這個範例只有單純的使用到HTML
但是如果要對影音串流做控制就需要JavaScript的幫忙了
<!DOCTYPE html>
<html><body>
<object
classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
id="vlc"
name="vlc"
class="vlcPlayer"
events="True">
<param name="Src" value="rtsp://Your Address" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
target="rtsp://Your Address" ></embed>
</OBJECT>
</html></body>
這邊嵌入的<Object>就是控制VLC player呈現的控制項
注意這邊有兩地方要輸入 RTSP的位址
給IE看的
<param name="Src" value="rtsp://Your Address" />給FireFox、Chrome看的
<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
target="rtsp://Your Address" ></embed>
研究過程中有看到說 HTML5 的 Video Tag可以支援RTSP
但是我怎麼試都是不成功....後來才發現有另一派的言論說HTML5不支援
如果有一天HTML5支援RTSP，就會變得很方便了
範例檔
參考資料:
http://stackoverflow.com/questions/14711438/vlc-javascript-api-on-ie
http://nerijuso.lt/how-stream-video-with-vlc-plugin-in-your-website/
http://stackoverflow.com/questions/3120027/embed-vlc-player-in-html
沒有留言:
張貼留言