VLCcontrols : embed VLC and controls in your webpages
Introduction
VLCcontrols.js is a small 'plugin' for the VLCobject javascript library that add commons controls to the standard VLC plugin like play, stop, volume, seekbar...
Also it provides a small, higher level and cross-browser API to control your VLC plugin in any webpage.
The code is under BSD, so you can redistribute it and/or modify it under the terms of the BSD License.
The code is still experimental and needs many improvements, feel free to send us your suggestions and corrections at contact@revolunet.com.
We hope this script will make VLC browser plugin more popular hence improving VLC plugin penetration over the web.
Enjoy ;)
Features list
Easy to use
Included Seekbar with our SimpleSlider.js slider library
Tested on Internet Explorer 6, Firefox 2, Opera, Safari (XP)
Small API to control the plugin
VLC options management
API :
var controls = new VLCcontrols(vlcobject); wraps controls to an existing VLCobject controls.options.set("start-time", 50); set a VLC option; here the media will start at 50secs. see VLC options wiki controls.options.set("directx-wallpaper"); set a VLC option; here the directx wallpaper output will be actived see VLC options wiki controls.options.clear(); reset all VLC options controls.play(uri); launch the movie in the plugin controls.stop(); stop playing the movie
Examples :
usage : extract the zip contents somewhere on your site directory
Simply load the player with VLCobject and add basic controls :
<script type="text/javascript" src="VLCobject.js">
<script type="text/javascript" src="VLCcontrols.js"></script>
<div id="vlccontent">
This text is replaced by the VLC player.
</div>
<script type="text/javascript">
var vlc_controls = null;
function init() {
// load basic VLCobject
var vlcobject = new VLCObject("mymovie", "400", "200", "0.8.6");
vlcobject.write("vlccontent");
// add controls
vlc_controls = new VLCcontrols(vlcobject, true);
}
window.onload = init();
</script>
another example, the file is played automatically :)
<script type="text/javascript" src="VLCobject.js">
<script type="text/javascript" src="VLCcontrols.js"></script>
<div id="vlccontent">
This text is replaced by the VLC player.
</div>
<script type="text/javascript">
var vlc_controls = null;
function init() {
// load basic VLCobject
var vlcobject = new VLCObject("mymovie", "400", "200", "0.8.6");
vlcobject.write("vlccontent");
// add controls
vlc_controls = new VLCcontrols(vlcobject, true);
vlc_controls.onready = function () {
vlc_controls.play("http://code.revolunet.com/VLCjs/rambo.mpg");
}
}
window.onload = init();
</script>
yet another exemple, the file is launched automatically at start and some options are passed to the VLC plugin :)
<script type="text/javascript" src="VLCobject.js">
<script type="text/javascript" src="VLCcontrols.js"></script>
<div id="vlccontent">
This text is replaced by the VLC player.
</div>
<script type="text/javascript">
var vlc_controls = null;
function init() {
// load basic VLCobject
var vlcobject = new VLCObject("mymovie", "400", "200", "0.8.6");
vlcobject.write("vlccontent");
// add controls
vlc_controls = new VLCcontrols(vlcobject);
vlc_controls.options.set("start-time", "60");
vlc_controls.options.set("directx-wallpaper");
//start playing when ready
vlc_controls.onready = function () {
vlc_controls.play("http://code.revolunet.com/VLCjs/rambo.mpg");
}
}
window.onload = init();
</script>
