2013-01-17 319 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();