Javascript 在 HTML 页面上嵌入 VLC 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14375767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embedding VLC plugin on HTML page
提问by GVillani82
I have a html file (getStream.html) that takes a stream from a certain url and show it. The code is the following:
我有一个 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>
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
如果我在我的电脑上有这个页面并且我尝试打开它（使用 IE 7/8/9），一切正常，但是如果把这个页面放在我的服务器上，然后我从这样的 url 访问它： http://myserver/direcortyOfMyhtmlFile/getStream.html
the page is opened and the buttons are loaded, but I obtain the following error:
页面已打开并加载了按钮，但出现以下错误：
in IE8 and IE9:
在 IE8 和 IE9 中：
That in english should be something like: "Impossible obtain the value of property 'add': object null or not defined"
英文应该是这样的：“不可能获得属性'add'的值：对象为空或未定义”
In IE7:
在 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.
这些错误似乎是指我的 html 中的对象，但这对我来说很奇怪，因为同一页面在本地工作没有问题。
回答by harry0000
test.htmlis will be helpful for how to use VLC WebAPI.
test.html将有助于如何使用 VLC WebAPI。
test.htmlis located in the directory where VLC was installed.
test.html位于安装 VLC 的目录中。
e.g.C:\Program Files (x86)\VideoLAN\VLC\sdk\activex\test.html
例如C:\Program Files (x86)\VideoLAN\VLC\sdk\activex\test.html
The following code is a quote from the test.html.
以下代码引用自test.html.
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:
JavaScript：
You can get vlc object from getVLC().
It works on IE 10 and Chrome.
您可以从getVLC().
它适用于 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();
回答by Kat Cox
I found this:
我找到了这个：
<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>
I don't see that in your code anywhere.... I think that's all you need and the target would be the location of your video...
我在你的代码中没有看到任何地方......我认为这就是你所需要的，目标将是你的视频的位置......
and here is more info on the vlc plugin:
http://wiki.videolan.org/Documentation%3aWebPlugin#Input_object
这是有关 vlc 插件的更多信息：http://wiki.videolan.org/Documentation%3aWebPlugin#Input_object
Another thing to check is that the address for the video file is correct....
要检查的另一件事是视频文件的地址是否正确....
回答by Kat Cox
Unfortunately, IE and VLC don't really work right now... I found this on the vlc forums:
不幸的是，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.
This basically means that even if you found a way to make it work, anyone trying to view the video on your site in IE would have to download and install the entire VLC player program to have it work in IE, and users probably don't want to do that. I can't get your code to work in firefox or IE8 on my boyfriends computer, although I might not have been putting the video address in properly... I get some message about no video output...
这基本上意味着，即使您找到了使其工作的方法，任何试图在 IE 中查看您网站上的视频的人都必须下载并安装整个 VLC 播放器程序才能使其在 IE 中工作，而用户可能不会想这样做。我无法让你的代码在我男朋友的电脑上的 Firefox 或 IE8 中工作，虽然我可能没有正确输入视频地址......我收到一些关于没有视频输出的消息......
I'll take a guess and say it probably works for you locally because you have VLC installed, but your server doesn't. Unfortunately you'll probably have to use Windows media player or something similar (Microsoft is great at forcing people to use their stuff!)
我会猜测并说它可能在本地适用于您，因为您安装了 VLC，但您的服务器没有。不幸的是，你可能不得不使用 Windows 媒体播放器或类似的东西（微软很擅长强迫人们使用他们的东西！）
And if you're wondering, it appears that the reason there is no cab file is because of the cost of having an active-x control signed.
如果您想知道，没有 cab 文件的原因似乎是因为对 active-x 控件进行签名的成本。
It's rather simple to have your page use VLC for firefox and chrome users, and Windows Media Player for IE users, if that would work for you.
让您的页面为 firefox 和 chrome 用户使用 VLC，为 IE 用户使用 Windows Media Player，这是相当简单的，如果这对您有用的话。
回答by Kat Cox
I found this piece of code somewhere in the web. Maybe it helps you and I give you an update so far I accomodated it for the same purpose... Maybe I don't.... who the futt knows... with all the nogodders and dobedders in here :-/
我在网上的某个地方找到了这段代码。也许它可以帮助你，我给你一个更新到目前为止我为了同样的目的容纳它......也许我不......谁知道......这里有所有的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%'}) */
Greets
问候
Gee
哎呀
I reduce the whole crap now to:
我现在把整个废话减少到：
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()
}
}
}
}
};
Didn't get it to work in ie as well... 2b continued...
也没有让它在 ie 中工作...... 2b 继续......
Greets
问候
Gee
哎呀
