Geek Answers Handbook

Embed VLC Plugin in HTML Page

I have an html file ( getStream.html ) that takes a stream from a specific url and shows it. The code is as follows:

 <!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 computer and I try to open it (using IE 7/8/9), everything works fine, but if I put this page on my server, and then I access it from the URL, like this: http://myserver/direcortyOfMyhtmlFile/getStream.html

the page opens and the buttons load, but I get the following error:

in IE8 and IE9: error in IE9, IE8

That in English there should be something like: "It is not possible to get the value of the" add "property: the object is null or not defined"

In IE7: enter image description here

These errors seem to relate to the object in my html, but this is strange for me, because the same page works locally without problems.

+4
source share
4 answers

test.html will be useful for using 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 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 the 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. // eg vlc.playlist.play();
+6
source

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 this in your code anywhere .... I think that everything you need and the goal will be the place of your video ...

and here is more information about the vlc plugin:
http://wiki.videolan.org/Documentation%3aWebPlugin#Input_object

Another thing to check is that the address for the video file is correct.

+3
source

Unfortunately, IE and VLC do not really work right now ... I found this on the vlc forums:

 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 brilliant. A good decision in my opinion. What lacking is a cab installer for the latest version.

This basically means that even if you find a way to make it work, anyone trying to watch the video on your site in IE will need to download and install the entire VLC player program to work in IE, and users probably don't want to to do this. I can’t get your code to work in firefox or IE8 on my mobile computer, although I may not have posted the video address correctly ... I get a message that there is no video output ...

I guess and say that this probably works for you locally because you have VLC installed but not on your server. Unfortunately, you probably have to use Windows Media Player or something similar (Microsoft can force people to use their materials!)

And if you're curious, it seems like the reason is that there is no cab file due to the cost of having an active x control.

It's pretty simple for your page to use VLC for firefox and chrome users, and Windows Media Player for IE users, if that works for you.

+1
source

I found this piece of code somewhere on the Internet. Maybe this helps you, and I give you an update so far, I posted it for the same purpose ... Maybe I don’t ... who knows what ... with all the nogodders and dobedders here: - /

 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

Now I reduce all crap 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() } } } } };

It did not work out, that is ... 2b continued ...

greets

Gee

+1
source

More articles:


All Articles