Javascript 在HTML页面上嵌入VLC插件_Javascript_Html_Plugins_Vlc

Javascript 在HTML页面上嵌入VLC插件

javascript html plugins

Javascript 在HTML页面上嵌入VLC插件,javascript,html,plugins,vlc,Javascript,Html,Plugins,Vlc,我有一个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> <

我有一个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>


视频
var vlc=document.getElementById（“vlcplayer”）；
功能播放器（vid）{
试一试{
var options=new数组（“：纵横比=16:10”、“--rtsp tcp”、“：无视频标题显示”）；
var id=vlc.playlist.add（视频，'Video'，选项）；
vlc.playlist.playItem（id）；
vlc.video.fullscreen=true；
//vlc.video.toggleFullscreen（）；
}
捕获（ex）{
警报（ex）；
}
}       
函数mute（）{
vlc.audio.toggleMute（）；
}
函数播放（）{
vlc.playlist.play（）；
}
函数停止（）{
vlc.playlist.stop（）；
}
函数pause（）{
vlc.playlist.togglePause（）；
} 
函数全屏（）{
vlc.video.toggleFullscreen（）；
}

如果我的电脑上有这个页面，我试着打开它（使用IE 7/8/9），一切正常，但是如果我把这个页面放在我的服务器上，然后我从这样的url访问它：

http://myserver/direcortyOfMyhtmlFile/getStream.html

页面已打开，按钮已加载，但我得到以下错误：

在IE8和IE9中：

在英语中应该是这样的：“不可能获取属性'add'的值：对象为null或未定义”

在IE7中：

这些错误似乎是指html中的对象，但这对我来说很奇怪，因为同一个页面在本地工作时没有问题

我发现：

<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插件的更多信息：

另一件需要检查的事情是视频文件的地址是否正确….

不幸的是，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或类似的工具（Microsoft擅长强迫人们使用他们的工具！）

如果您想知道，没有cab文件的原因似乎是因为对active-x控件进行签名的成本

对于firefox和chrome用户，让您的页面使用VLC，对于IE用户，让您的页面使用Windows Media Player非常简单，如果这对您有用的话。

我在web的某个地方找到了这段代码。也许这对你有帮助，我给你一个更新，到目前为止，我是为了同样的目的而容纳它的。。。也许我不。。。。谁知道呢。。。所有的诺戈德人和多伯德人都在这里：-/

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%'}) */

函数runVLC（目标，流）
{
var-support=true
var addr='rtsp://'+window.location.hostname+stream
如果（$.browser.msie）{
$（目标）.html（“”）
}
else if（$.browser.mozilla | |$.browser.webkit）{
$（target.html（'test.html
is）将有助于如何使用VLC WebAPI
test.html
位于安装VLC的目录中
例如C:\ProgramFiles（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>

你为什么给这个问题贴上html5的标签？@Joseph82你做了什么来解决这个问题？我尝试过这个解决方案，但只适用于mozilla或chrome。我需要使用IE。我的代码在IE中工作得很好，但前提是我的pc上本地有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>

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