##Ranger Slider Plugin for Video JS Player
rangeslider.js is a plugin for Video JS player. The aim of this plugin is to create range slider to select a region of a video in video-js.
##Live-Demo
There is a demo of the range slider plugin in the next webpage:
http://danielcebrian.com/rangeslider/demo.html
##Installation
Add rangeslider.min.js and rangeslider.min.css CDN distributed file to your head tag, just after videojs:
<html>
<head>
<!--Latest VideoJS-->
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="lib/video.min.js"></script>
<!--RangeSlider Pluging-->
<script src="src/rangeslider.js"></script>
<link href="src/rangeslider.css" rel="stylesheet">
</head>
<body>
...##Usage
Load a video in video-js, as you can see in the tutorial of video-js player
<video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup=''>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>In addition, to load and control the plugin from Javascript must add a few lines of javascript like:
var options = {},
mplayer = videojs("vid1"),
mplayer.rangeslider(options);The first one was to load the videojs player and the second one is to load the rangeslider plugin You can specify to the plugin to be loaded with the range slider open, the panel time, etc.. with the initial options. For example:
locked = true/false; hidden = true/false; panel = true/false; controlTime = true/false;
var options = {locked:true,controlTime:false}, //This will lock the range slider and won't show the control time panel to set the position of the arrows
mplayer=videojs("vid1"),
mplayer.rangeslider(options); #API Methods
Once the plugin is started, we can control the range slider with the following functions:
Show the Slider Bar Component
mplayer.showSlider();Hide the Slider Bar Component
mplayer.hideSlider();Show the Panel above the arrow with the current position
mplayer.showSliderPanel();Hide the Panel above the arrow with the current position
mplayer.hideSliderPanel();Show the panel to edit the time for the start and end arrows
mplayer.showControlTime();Hide the panel to edit the time for the start and end arrows
mplayer.hideControlTime();Lock the Slider bar and it will not be possible to change the arrow positions
mplayer.lockSlider();Unlock the Slider bar and it will be possible to change the arrow positions
mplayer.unlockSlider();Set a values in seconds for the position of the arrows.
mplayer.setValueSlider(start,end);The video will be played in a selected section. It is necessary to enter the start and end second.
mplayer.playBetween(start, end);The video will be looped in a selected section. It is necessary to enter the start and end second.
mplayer.loopBetween(start, end);Get the Values of the arrows in second.
mplayer.getValueSlider();Fired when the plugin has been loaded
mplayer.on("loadedRangeSlider",function() {
//init
...
});Fired when the values of slider have changed
mplayer.on("sliderchange",function() {
var values = mplayer.getValueSlider();
...
});