Sintel movie | © copyright Blender Foundation | durian.blender.org
Your own html5 video player with Mooplay
MooPlay brings javascript controls over an html5 video element. You can build and customize your own player with :
- a play / pause control
- buttons to move inside the video (rewind and fast forward)
- an interactive play progress slider
- a load progress bar
- a volume slider and a mute button
- subtitles loaded through an ajax request and synchronized with the video. Supported formats are SubRip (.srt) and SubViewer (.sub)
- full page display
- current and/or remaining time
The video element methods can be called by other scripts, MooPlay objects will adapt themself to any state changes.
About a hundred tests are running on each new step, to make sure all the functionnalities are still available. You can see them running here.
How to set up custom controls over your html5 video player
- Download the version 1.2 of the Mootools framework and the latest release of Mooplay.
- Add the two scripts to your webpage.
- Put a video element to tour page with a video file.
- Add the chosen following controls and customize them : use html elements and css rules as you want.
- Note: The Mooplay package comes with an already built player, this is the one seen here. Feel free to use it as a starting point.
MooPlay.Control.PlayPause
<video id="video" src="myvideo.ogv"></video>
<a href="#" id='playpause'>play / pause</a>
new MooPlay.Control.PlayPause( $('video'), $('playpause'), {
paused_state_class: 'paused',
over_state_class: 'over',
click_state_class: 'clicked'
});
When the playpause element receive clicks, the playing stat is toggled.
It's css classes match the current state of the video element, accordingly to the options.
MooPlay.Control.FastMove
<video id="video" src="myvideo.ogv"></video>
<a id="fastrewindbutton" href="#">fast rewind</a>
<a id="fastforwardbutton" href="#">fast forward</a>
new MooPlay.Control.FastMove( $('video'), $('fastforwardbutton'), {speed_factor: 6});
new MooPlay.Control.FastMove($('video'), $('fastrewindbutton'), {speed_factor: -4});
The element passed as the first argument is a control to move in the video element (second argument) when it's clicked.
speed_factor is passed as an option to specify the behavior, for example 6 would fast forward while -4 would rewind.
MooPlay.Control.TimeDisplay
<span id="current_time_container"></span>
<span id="remaining_time_container"></span>
new MooPlay.Control.TimeDisplay($('video'), $('current_time_container'), {pattern: '{h}:{m}:{s}', current: true});
new MooPlay.Control.TimeDisplay($('video'), $('remaining_time_container'), {pattern: '{h}:{m}:{s}', current: false});
The element will display the current time or the remaining time of the video according to :
- the value of the current option (default is true)
- the format specified by the pattern option (default is
'{h}:{m}:{s},{ms}' ). See the Mootools String.substitute method.
MooPlay.Control.LoadProgress
<video id="video" src="myvideo.ogv"></video>
<div id="progress_container" style="width:400px;height:5px;background:#a0a0a0;">
var progressbar = new ProgressBar({
container: $('progress_container'),
startPercentage: 0,
step: 0,
});
new MooPlay.Control.LoadProgress($('video'), progressbar);
The progress_container element will be filled function of the video file load state
MooPlay.Control.PlayProgress
<video id="video" src="myvideo.ogv"></video>
<div id="slider" style="width:400px;height:5px;background:#a0a0a0;">
<div id="knob" style="width:5px;height:5px;background:#ffff80;"></div>
</div>
var slider = new Slider($('slider'), $('knob'));
new MooPlay.Control.PlayProgress( $('video'), slider);
The knob position will be set function of the video progress in the playing.
The slider element can be used to navigate through the video : by clicking anywhere on the bar, or dragging the knob.
MooPlay.Control.Mute
<video id="video" src="myvideo.ogv"></video>
<a id="mute" href="#">mute</a>
new MooPlay.Control.Mute($('video'), $('mute'));
The mute element will toggle the mute state of the video through user clicks.
MooPlay.Control.Volume
<video id="video" src="myvideo.ogv"></video>
<div id="slider_volume" style="width:100px;height:5px;background:#a0a0a0;">
<div id="knob_volume" style="width:5px;height:5px;background:#ff4040;"></div>
</div>
var slider_volume = new Slider($('slider_volume'), $('knob_volume'), {steps: 100});
new MooPlay.Control.Volume($('video'), slider_volume , {auto_unmute: true});
The user can set the volume of the video through the slider.
If the auto_unmute is true, any change on the volume will disable the muted state.
MooPlay.Control.FullScreen
<a id="fullscreen" href="#">
fullscreen
</a>
new MooPlay.Control.FullScreen($('container'), $('fullscreen'));
When clicked, the fullscreen button will fire the transition to display the container on the full page.
container should be the video element itself or any of its ancestors.
MooPlay.Subtitle
<video id="video" src="myvideo.ogv"></video>
<div id="subtitles_container"></div>
var subs_player = new MooPlay.Subtitle.Player($('video'), $('subtitles_container'));
var loader = new MooPlay.Subtitle.Loader( 'mysubtitles.srt', {
onComplete: function(subs_hash) {
subs_player.loadSubtitles(subs_hash);
}
});
The subtitles are loaded through MooPlay.Subtitle.Loader performing an ajax request. They will be then displayed in the subtitles_container element and synchronized with the current position of the video element.
MooPlay.Subtitle.Player can have an options hash as the third. Through it, you can specifiy your own onDisplay and onDispose callbacks functions. When called, the both of them will received 3 arguments :
- the element to be displayed
- the container as specified at initialization
- the overlapping level : in case several subtitles should be displayed at the same time, each one has a different level associated as integer, beggining to 0 and going up according to the displaying order through time.