在HTML页面上嵌入VLC插件 [英] Embedding VLC plugin on HTML page
问题描述
我有一个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-8http-equiv =Content-Type/>
< title> Vids< / title>
< link href =main.css =stylesheettype =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 =Volumevalue =100/>
< param name =AutoPlayvalue =true/>
< param name =AutoLoopvalue =false/>
< / object>
< / div>
< div id =controls>
< input type =buttononclick =play（）; value =播放/>
< input type =buttononclick =pause（）; value =暂停/>
< input type =buttononclick =stop（）; value =停止/>
< input type =buttononclick =mute（）; value =静音/>
< / div>
< script type =text / javascriptlanguage =javascript>
var vlc = document.getElementById（vlcplayer）;
函数播放器（vid）{
尝试{
var options = new Array（：aspect-ratio = 16：10，--rtsp-tcp，：no-video -title秀）;
var id = vlc.playlist.add（vid，'Video'，options）;
vlc.playlist.playItem（id）;
vlc.video.fullscreen = true;
//vlc.video.toggleFullscreen（）;
}
catch（ex）{
alert（ex）;
函数静音（）{
vlc.audio.toggleMute（）;
}
function play（）{
vlc.playlist.play（）;
}
function stop（）{
vlc.playlist.stop（）;
}
函数暂停（）{
vlc.playlist.togglePause（）;
}
function fullscreen（）{
vlc.video.toggleFullscreen（）;
}
< / script>
< / body>
< / html>
如果我的电脑上有这个页面，我试着打开它（使用IE 7/8/9 ），所有的作品都很好，但是如果把这个页面放到我的服务器上，然后我可以像这样访问它： http：//myserver/direcortyOfMyhtmlFile/getStream.html
打开页面并加载按钮，但我得到以下错误：IE8中的
和IE9：
在英文中应该是这样的：不可能获得属性的值'add'：object null or not defined
在IE7中：
这些错误似乎涉及到在我的html中反对，但这对我来说很奇怪，因为同一页面在本地没有问题。
test.html 对于如何使用VLC WebAPI。
test.html 位于安装VLC的目录中。
例如
C：\程序文件（x86）\VideoLAN\VLC\sdk\activex\test.html code>
以下代码是来自 test.html 的引用。
HTML：
< object classid =clsid ：9BE31822-FDAD-461B-AD51-BE1D1C159921width =640height =360id =vlcevents =True>
< param name =MRLvalue =/>
< param name =ShowDisplayvalue =True/>
< param name =AutoLoopvalue =False/>
< param name =AutoPlayvalue =False/>
< param name =Volumevalue =50/>
< param name =toolbarvalue =true/>
< param name =StartTimevalue =0/>
< EMBED pluginspage =http://www.videolan.org
type =application / x-vlc-plugin
version =VideoLAN.VLCPlugin.2
$ = VLC >
< / EMBED>
< / object>
JavaScript：
您可以从 getVLC（）获得vlc对象。
适用于IE 10和Chrome。
函数getVLC（名称）
{
if（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）;
//做些什么。
//例如vlc.playlist.play（）;
I have a html file (getStream.html) that takes a stream from a certain url and show it. The code is the following:
<!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>
If I have this page on my pc and I try open it (using IE 7/8/9), all works good, but If put this page on my server, and then I access to it from a url like this: http://myserver/direcortyOfMyhtmlFile/getStream.html
the page is opened and the buttons are loaded, but I obtain the following error:
in IE8 and IE9:
That in english should be something like: "Impossible obtain the value of property 'add': object null or not defined"
In IE7:
These errors seems to refer to object in my html, but this is strange for me, because the same page works without problem locally.
解决方案 test.html is will be helpful for how to use VLC WebAPI.
test.html is located in the directory where VLC was installed.
e.g. C:\Program Files (x86)\VideoLAN\VLC\sdk\activex\test.html
The following code is a quote from the 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:
You can get vlc object from getVLC().
It works on IE 10 and 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();
这篇关于在HTML页面上嵌入VLC插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
