HowTo Integrate VLC plugin in your webpage

From VideoLAN Wiki
Jump to navigation Jump to search

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>