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

From VideoLAN Wiki
Jump to navigation Jump to search
Line 34: Line 34:
 
  <script type="text/javascript" src="VLCobject.js"></script>
 
  <script type="text/javascript" src="VLCobject.js"></script>
 
  <script type="text/javascript" src="VLCcontrols.js"></script>
 
  <script type="text/javascript" src="VLCcontrols.js"></script>
 
+
 
  &lt;div id="vlccontent">This text is replaced by the VLC player.</div>
 
  &lt;div id="vlccontent">This text is replaced by the VLC player.</div>
 
+
 
  <script type="text/javascript">
 
  <script type="text/javascript">
 
   var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");
 
   var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");

Revision as of 10:23, 6 January 2009

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 source and extract it to your website
  • 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>