Difference between revisions of "HowTo Integrate VLC plugin in your webpage"

From VideoLAN Wiki
Jump to navigation Jump to search
m
Line 1: Line 1:
−
== VLCjs javascript library ==
+
== Embedding the plugin : the VLCobject javascript library ==
  
 
I've created this small javascript library to allows you to easyly add the VLC plugin in your web pages.
 
I've created this small javascript library to allows you to easyly add the VLC plugin in your web pages.
Line 5: Line 5:
 
Here's how you add the control to your page :
 
Here's how you add the control to your page :
  
−
* first, download the [http://code.revolunet.com/VLCjs/VLSjs.zip source zip] and extract it to your website (i suppose you create a VLCjs subfolder)
+
* first, download the [http://code.revolunet.com/VLCobject/VLCobject.jssource] and extract it to your  
 
* then, create a simple html test page like this on your server :  
 
* then, create a simple html test page like this on your server :  
−
  <script language="javascript" src="VLCjs/VLCjs.js"></script>
+
  <script type="text/javascript" src="VLCobject.js"></script>
−
  <object id="myplayer" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"></object>
+
 
−
  <script language="javascript">
+
  &lt;div id="vlccontent">This text is replaced by the VLC player.</div>
−
        window.onload = function() {
+
 
−
            var vlc = new VLCplayer("myplayer", 400, 300);
+
  <script type="text/javascript">
−
            vlc.setIdleImage("idle2.gif");
+
  var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");
−
            vlc.play("http://example.com/movie.mpeg");
+
  myvlc.addParam("MRL","http://code.revolunet.com/VLCjs/rambo.mpg");
−
        }
+
  myvlc.write("vlccontent");
 
  </script>
 
  </script>
 +
 +
this should create a player object and launch a movie when the pages open ;)
 +
 +
* You can find a demo here : http://vlc.revolunet.com (some demo medias specially for french free.fr users)
 +
* check out the docs here : http://code.revolunet.com/VLCobject/EN
  
−
this should create a player object and launch a movie ;)
+
If you want to add controls, use VLCcontrols library (see below)
  
−
* You can find a demo here : http://vlc.revolunet.com (some demo medias specially for french free.fr users)
 
−
* check out the docs here : http://code.revolunet.com/VLCjs/EN
 
  
−
Any comments are welcome to improve this lib !!
+
== Adding controls : the VLCcontrols javascript library ==
 +
 
 +
This lib add commons controls to the VLCobject : Play, Pause, Stop, Volume, Seekbar, Debug...
 +
 
 +
The doc and code is available here : http://code.revolunet.com/VLCcontrols/EN
 +
 
 +
You just have to add one line of script to add the controls to your VLCobject instance :
 +
 
 +
<script type="text/javascript" src="VLCobject.js"></script>
 +
<script type="text/javascript" src="VLCcontrols.js"></script>
 +
 
 +
&lt;div id="vlccontent">This text is replaced by the VLC player.</div>
  
−
It works on IE/Firefox and maybe Safari but i cannot test it
+
<script type="text/javascript">
 +
  var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");
 +
  myvlc.addParam("MRL","http://code.revolunet.com/VLCjs/rambo.mpg");
 +
  myvlc.write("vlccontent");
 +
  var myvlccontrols = new VLCcontrols(myvlc);
 +
</script>

Revision as of 17:06, 29 January 2008

Embedding the plugin : the VLCobject javascript library

I've created this small javascript library to allows you to easyly add the VLC plugin in your web pages.

Here's how you add the control to your page :

  • first, download the [1] and extract it to your
  • then, create a simple html test page like this on your server :
<script type="text/javascript" src="VLCobject.js"></script>

<div id="vlccontent">This text is replaced by the VLC player. 

<script type="text/javascript">
  var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");
  myvlc.addParam("MRL","http://code.revolunet.com/VLCjs/rambo.mpg");
  myvlc.write("vlccontent");
</script>

this should create a player object and launch a movie when the pages open ;)

If you want to add controls, use VLCcontrols library (see below)


Adding controls : the VLCcontrols javascript library

This lib add commons controls to the VLCobject : Play, Pause, Stop, Volume, Seekbar, Debug...

The doc and code is available here : http://code.revolunet.com/VLCcontrols/EN

You just have to add one line of script to add the controls to your VLCobject instance : 

<script type="text/javascript" src="VLCobject.js"></script>	
<script type="text/javascript" src="VLCcontrols.js"></script>

<div id="vlccontent">This text is replaced by the VLC player. 

<script type="text/javascript">
  var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");
  myvlc.addParam("MRL","http://code.revolunet.com/VLCjs/rambo.mpg");
  myvlc.write("vlccontent");
  var myvlccontrols = new VLCcontrols(myvlc);
</script>
Retrieved from "https://wiki.videolan.org/index.php?title=HowTo_Integrate_VLC_plugin_in_your_webpage&oldid=10591"