2013-01-17 276 views
4

我有一個HTML文件(getStream.html),它從一個特定的URL獲取流並顯示它。代碼如下:在HTML頁面上嵌入VLC插件

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>Vids</title> 
    <link href="main.css" rel="stylesheet" type="text/css" /> 
</head> 

<body onload='player("http://mystreamaddress:8080");'> 

<div id="player"> 
    <object type="application/x-vlc-plugin" 
     id="vlcplayer" 
     width="864px" 
     height="540px" 
     classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"> 
     <param name="Volume" value="100" /> 
     <param name="AutoPlay" value="true" /> 
     <param name="AutoLoop" value="false" /> 
    </object> 
</div> 

<div id="controls"> 
    <input type="button" onclick="play();" value="Play" /> 
    <input type="button" onclick="pause();" value="Pause" /> 
    <input type="button" onclick="stop();" value="Stop" /> 
    <input type="button" onclick="mute();" value="Mute" /> 
</div> 

<script type="text/javascript" language="javascript"> 
    var vlc = document.getElementById("vlcplayer"); 
    function player(vid) { 
    try { 
     var options = new Array(":aspect-ratio=16:10", "--rtsp-tcp", ":no-video-title-show"); 
     var id = vlc.playlist.add(vid,'Video',options); 
     vlc.playlist.playItem(id); 
     vlc.video.fullscreen = true; 
     //vlc.video.toggleFullscreen(); 
    } 
    catch (ex) { 
     alert(ex); 
    } 
    }  
    function mute(){ 
    vlc.audio.toggleMute(); 
    } 

    function play(){ 
    vlc.playlist.play(); 
    } 

    function stop(){ 
    vlc.playlist.stop(); 
    } 

    function pause(){ 
    vlc.playlist.togglePause(); 
    } 

    function fullscreen(){ 
    vlc.video.toggleFullscreen(); 
    } 

</script> 

</body> 

</html> 

如果我有我的電腦上這一頁,我嘗試(使用IE 7/8/9),所有的作品好,打開它,但如果把這個頁面我的服務器上,並然後我訪問它從URL是這樣的:http://myserver/direcortyOfMyhtmlFile/getStream.html

頁打開,按鈕加載,但我得到了以下錯誤:

在IE8和IE9

error in IE9, IE8

,在英語應該是這樣的:「我mpossible獲得的財產「添加」值:定義」

在IE7對象空或不是: enter image description here

這些錯誤似乎是指在我的html反對,但是這是奇怪的我,因爲同樣的頁面在當地沒有問題。

+0

你爲什麼標記這個問題html5? – robertc

+0

只是一個錯誤。 – GVillani82

+0

@ Joseph82你做了什麼來解決這個問題? – Chiranjib

回答

3

我發現這一點:

<embed type="application/x-vlc-plugin" 
pluginspage="http://www.videolan.org"version="VideoLAN.VLCPlugin.2" width="100%"   
height="100%" id="vlc" loop="yes"autoplay="yes" target="http://10.1.2.201:8000/"></embed> 

我不明白,在你的代碼的任何地方....我想這就是你需要和目標將是你的視頻的位置...

這裏是在VLC插件的更多信息:
http://wiki.videolan.org/Documentation%3aWebPlugin#Input_object

另一件事是檢查該地址的視頻文件是正確的....

+0

我試過這個解決方案,但只適用於Mozilla或Chrome。我需要使用IE。我的代碼在IE中運行良好,但只有當我在本地有我的電腦上的html文件。如上所述,如果我把文件放在我的服務器上,我記得它出現了一個奇怪的問題。 :( – GVillani82

1

不幸的是,IE和VLC沒有真正的工作現在...我發現這對VLC論壇:

VLC included activex support up until version 0.8.6, I believe. At that time, you could 
access a cab on the videolan and therefore 'automatic' installation into IE and Firefox 
family browsers was fine. Thereafter support for activex seemed to stop; no cab, no 
activex component. 

VLC 1.0.* once again contains activex support, and that's brilliant. A good decision in 
my opinion. What's lacking is a cab installer for the latest version. 

這基本上意味着,即使你找到了一種方法,使其工作,任何人試圖在IE瀏覽器中查看您的網站上的視頻將不得不下載並安裝整個VLC播放器程序,以使其在IE中運行,並且用戶可能不希望這樣做。我不能讓你的代碼在我的男朋友電腦上的Firefox或IE8上工作,雖然我可能沒有正確地把視頻地址...我得到一些關於沒有視頻輸出的消息...

我'我會猜測並說它可能適用於你本地,因爲你安裝了VLC,但你的服務器沒有。不幸的是,你可能不得不使用Windows媒體播放器或類似的東西(微軟很擅長強迫人們使用他們的東西!)

如果你想知道,似乎沒有cab文件的原因是因爲具有簽名的active-x控件的成本。

讓你的頁面爲firefox和chrome用戶使用VLC,爲IE用戶使用Windows Media Player是相當簡單的,如果這對你有用的話。

1

我發現這段代碼在網絡的某個地方。 也許它可以幫助你,我爲你提供了一個更新,目的是爲了達到同樣的目的......也許我不......那些人知道......與所有的nogodders和dobedders在這裏: -/

function runVLC(target, stream) 
{ 
var support=true 
var addr='rtsp://' + window.location.hostname + stream 
if ($.browser.msie){ 
$(target).html('<object type = "application/x-vlc-plugin"' + 'version = 
"VideoLAN.VLCPlugin.2"' + 'classid = "clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"' + 
'events = "true"' + 'id = "vlc"></object>') 
} 
else if ($.browser.mozilla || $.browser.webkit){ 
$(target).html('<embed type = "application/x-vlc-plugin"' + 'class="vlc_plugin"' + 
'pluginspage="http://www.videolan.org"' + 'version="VideoLAN.VLCPlugin.2" ' + 
'width="660" height="372"' + 
'id="vlc"' + 'autoplay="true"' + 'allowfullscreen="false"' + 'windowless="true"' + 
'mute="false"' + 'loop="true"' + '<toolbar="false"' + 'bgcolor="#111111"' + 
'branding="false"' + 'controls="false"' + 'aspectRatio="16:9"' + 
'target="whatever.mp4"></embed>') 
} 
else{ 
support=false 
$(target).empty().html('<div id = "dialog_error">Error: browser not supported!</div>') 
} 
if (support){ 
var vlc = document.getElementById('vlc') 
if (vlc){ 
var opt = new Array(':network-caching=300') 
try{ 
var id = vlc.playlist.add(addr, '', opt) 
vlc.playlist.playItem(id) 
} 
catch (e){ 
$(target).empty().html('<div id = "dialog_error">Error: ' + e + '<br>URL: ' + addr + 
'</div>') 
} 
} 
} 
} 
/* $(target + ' object').css({'width': '100%', 'height': '100%'}) */ 

電賀

嘖嘖

我現在降低整個廢話:

function runvlc(){ 
var target=$('body') 
var error=$('#dialog_error') 
var support=true 
var addr='rtsp://../html/media/video/TESTCARD.MP4' 
if (navigator.userAgent.toLowerCase().indexOf("msie")!=-1){ 
target.append('<object type = "application/x-vlc-plugin"' + 'version = " 
VideoLAN.VLCPlugin.2"' + 'classid = "clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"' + 
'events = "true"' + 'id = "vlc"></object>') 
} 
else if (navigator.userAgent.toLowerCase().indexOf("msie")==-1){ 
target.append('<embed type = "application/x-vlc-plugin"' + 'class="vlc_plugin"' + 
'pluginspage="http://www.videolan.org"' + 'version="VideoLAN.VLCPlugin.2" ' + 
'width="660" height="372"' + 
'id="vlc"' + 'autoplay="true"' + 'allowfullscreen="false"' + 'windowless="true"' + 
'mute="false"' + 'loop="true"' + '<toolbar="false"' + 'bgcolor="#111111"' + 
'branding="false"' + 
'controls="false"' + 'aspectRatio="16:9"' + 'target="whatever.mp4"> 
</embed>') 
} 
else{ 
support=false 
error.empty().html('Error: browser not supported!') 
error.show() 
if (support){ 
var vlc=document.getElementById('vlc') 
if (vlc){ 
var options=new Array(':network-caching=300') /* set additional vlc--options */ 
try{ /* error handling */ 
var id = vlc.playlist.add(addr,'',options) 
vlc.playlist.playItem(id) 
} 
catch (e){ 
error.empty().html('Error: ' + e + '<br>URL: ' + addr + '') 
error.show() 
} 
} 
} 
} 
}; 

沒有得到它的工作in ie以及... 2b續...

Greets

嘖嘖

6

test.html是將是如何使用VLC的WebAPI很有幫助。

test.html位於安裝VLC的目錄中。

例如C:\Program Files (x86)\VideoLAN\VLC\sdk\activex\test.html

以下代碼是來自test.html的引用。

HTML:

<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" width="640" height="360" 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="toolbar" value="true" /> 
    <param name="StartTime" value="0" /> 
    <EMBED pluginspage="http://www.videolan.org" 
    type="application/x-vlc-plugin" 
    version="VideoLAN.VLCPlugin.2" 
    width="640" 
    height="360" 
    toolbar="true" 
    loop="false" 
    text="Waiting for video" 
    name="vlc"> 
    </EMBED> 
</object> 

的JavaScript:

您可以從getVLC()得到VLC對象。
它適用於IE 10和Chrome。

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 // if (navigator.appName.indexOf("Microsoft Internet")!=-1) 
    { 
     return document.getElementById(name); 
    } 
} 

var vlc = getVLC("vlc"); 

// do something. 
// e.g. vlc.playlist.play();