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

From VideoLAN Wiki
Jump to navigation Jump to search
m (urls changed)
(update)
Line 1: Line 1:
−
== Embedding the plugin : the VLCobject javascript library ==
+
== Embedding the VLC plugin in your webpage  ==
  
−
I've created this small javascript library to allows you to easyly add the VLC plugin in your web pages.
+
The VLC plugin can be directly embedded in your webpage :
  
−
Here's how you add the control to your page :
+
<embed type="application/x-vlc-plugin" name="player" autoplay="no" loop="no" target="udp:@239.255.12.42" />
  
−
* first, download the [http://code.revolunet.com/VLCobject/VLCobject.js source] and extract it to your website
+
You then have to use the official Mozilla/ActiveX api documented here : http://wiki.videolan.org/Documentation:WebPlugin
−
* then, create a simple html test page like this on your server :  
 
−
<script type="text/javascript" src="VLCobject.js"></script>
 
−
 
−
&lt;div id="vlccontent">This text is replaced by the VLC player.</div>
 
−
 
−
<script type="text/javascript">
 
−
  var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");
 
−
  myvlc.addParam("MRL","http://movies.apple.com/movies/sony_pictures/yearone/yearone-tlr1_h.640.mov");
 
−
  myvlc.write("vlccontent");
 
−
</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
 
  
−
If you want to add controls, use VLCcontrols library (see below)
+
But, if you need '''controls''' (buttons, slidebar...), you have to use the '''open source revolunet VLCcontrols''' library.
  
−
== Adding controls : the VLCcontrols javascript library ==
+
* the code resides @github : https://github.com/revolunet/VLCcontrols
 +
* you have some demo here : http://revolunet.github.com/VLCcontrols
  
−
This lib add commons controls to the VLCobject : Play, Pause, Stop, Volume, Seekbar, Debug...
+
Usage exemple :  
  
−
The doc and code is available here : http://code.revolunet.com/VLCcontrols/EN
+
    <!-- include jquery + source -->
 +
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
    <script language="javascript" src="http://revolunet.github.com/VLCcontrols/src/jquery-vlc.js"></script>
 +
    <link rel="stylesheet" type="text/css" href="http://revolunet.github.com/VLCcontrols/src/styles.css" />
 +
    <!-- embed the player and play a file -->
 +
    <script language="javascript">
 +
        var player = VLCobject.embedPlayer('vlc1', 400, 300);
 +
        player.play('http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_surround-fix.avi');
 +
    </script>
  
−
You just have to add one line of script to add the controls to your VLCobject instance :
+
Note the fullscreen is currently broken in VLC plugin itself (VLC>1.1)
−
 
 
−
<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>
 
−
 
−
<script type="text/javascript">
 
−
  var myvlc = new VLCObject("mymovie", "400", "200", "0.8.6");
 
−
  myvlc.addParam("MRL","http://movies.apple.com/movies/sony_pictures/yearone/yearone-tlr1_h.640.mov");
 
−
  myvlc.write("vlccontent");
 
−
  var myvlccontrols = new VLCcontrols(myvlc);
 
−
</script>
 

Revision as of 10:20, 17 May 2011

Embedding the VLC plugin in your webpage

The VLC plugin can be directly embedded in your webpage : 

<embed type="application/x-vlc-plugin" name="player" autoplay="no" loop="no" target="udp:@239.255.12.42" />

You then have to use the official Mozilla/ActiveX api documented here : http://wiki.videolan.org/Documentation:WebPlugin


But, if you need controls (buttons, slidebar...), you have to use the open source revolunet VLCcontrols library.

Usage exemple : 

   <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
   <script language="javascript" src="http://revolunet.github.com/VLCcontrols/src/jquery-vlc.js"></script> 
   <link rel="stylesheet" type="text/css" href="http://revolunet.github.com/VLCcontrols/src/styles.css" /> 
   <script language="javascript">
       var player = VLCobject.embedPlayer('vlc1', 400, 300);
       player.play('http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_surround-fix.avi');
   </script>

Note the fullscreen is currently broken in VLC plugin itself (VLC>1.1)

Retrieved from "https://wiki.videolan.org/index.php?title=HowTo_Integrate_VLC_plugin_in_your_webpage&oldid=19150"