javascript - 在 HTML 页面上嵌入 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>
    <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 中的对象,但这对我来说很奇怪,因为同一页面在本地工作没有问题。

最佳答案

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

关于javascript - 在 HTML 页面上嵌入 VLC 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14375767/

相关文章:

javascript - Angular 5 在 ngIf 空结果上显示 "No data found"

c# - 需要一个 Javascript 日历,它应该只显示与文本框中的日期相对应的下一个日期

javascript - 如何设置 Angular 配置变量来设置服务器地址?

html - CSS:无法访问下拉菜单

jquery - 我如何使用 jQuery 在我的网站演示中自动填写表单,就像真人在实际输入一样?

Grails 安装插件 rest-client-builder 1.0.2 时出错,模块描述符错误

javascript - CKEditor 图像宽度和高度作为 HTML 属性而不是内联样式

javascript - 为什么removeClass()不作用于内部元素?

javascript - 值更改范围 slider HTML5 和 ng-repeat AngularJs

http - 具有基本身份验证的 http 的 Fluentd 插件