在HTML页面上嵌入VLC插件

4

我有一个HTML文件(getStream.html),它从特定的URL获取流并显示它。 代码如下:

<!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 这在英语中应该是这样的:“无法获取属性'add'的值:对象为空或未定义” 在IE7中: enter image description here 这些错误似乎是指我的html中的对象,但这对我来说很奇怪,因为同样的页面在本地没有问题。

你为什么给这个问题打上了html5的标签? - robertc
@Joseph82,你是怎么解决这个问题的? - Chiranjib
4个回答

阿里云服务器只需要99元/年,新老用户同享,点击查看详情
7

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();

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 另一件需要检查的事情是视频文件的地址是否正确......

我尝试了这个解决方案,但只适用于Mozilla或Chrome。我需要使用IE。我的代码在IE中运行良好,但仅当我在本地PC上拥有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 Media Player或类似的东西(微软很擅长强迫人们使用他们的东西!) 如果你想知道,似乎没有cab文件的原因是由于签署活动X控件的成本。 如果这对你有用的话,对于Firefox和Chrome用户,让你的页面使用VLC,对于IE用户,则使用Windows Media Player相当简单。

1

我在网上找到了这段代码。也许它能帮助你,我已经为同样的目的进行了更新...也许我没有...谁知道呢...在这里有那么多糟糕的人和做坏事的人 :-/

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()
}
}
}
}
};

在IE中无法使其工作......

2b continued...

问候

Gee


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,