This is about scripting the HTML 5 video-tag with Mootools 1.2.

One might ask, what is special about the video tag? At the first look nothing, it’s a HTML-element like any other. But if you try to use some mootools functions (adding events or querying properties) you soon realize that it doesn’t work out of the box in the current release. But there’s a workaround.

Read more about it at Lighthouse (mootools bugtracking) »

To put it briefly: To access video properties (like $(‘myvid’).currentTime) or to attach new events (like volumechange) via mootools, you can use this workaround:

var media_events = { loadstart: 2, progress: 2, suspend: 2, abort: 2, error: 2, emptied: 2, stalled: 2, play: 2, pause: 2, loadedmetadata: 2, loadeddata: 2, waiting: 2, playing: 2, canplay: 2, canplaythrough: 2, seeking: 2, seeked: 2, timeupdate: 2, ended: 2, ratechange: 2, durationchange: 2, volumechange: 2 } Element.NativeEvents = $merge(Element.NativeEvents, media_events); var media_properties = [ 'videoWidth', 'videoHeight', 'readyState', 'autobuffer', 'error', 'networkState', 'currentTime', 'duration', 'paused', 'seeking', 'ended', 'autoplay', 'loop', 'controls', 'volume', 'muted', 'startTime', 'buffered', 'defaultPlaybackRate', 'playbackRate', 'played', 'seekable' // these 6 properties currently don't work in firefox ]; media_properties.each(function(prop){ Element.Properties.set(prop, { set: function(value){ this[prop] = value; }, get: function(){ return this[prop]; } }) });

Please note: This is only a quick workaround until it’s implemented in mootools-core.

How to realize video playback controls via mootools

You can see everything in the demo below


This is quite straightforward (using above workaround):

Showing the current playback time

We use a span to display the current time of the video playback and to update it continously we use the timeupdate-Event like this:

$('myvid').addEvent('timeupdate', function(an_event){ $('timemeter').set('html', this.get('currentTime').toFixed(1)); });
Controlling volume via buttons and displaying it

Also no rocket science, but we have to look at not exceeding the limits for volume (from 0.0 up to 1.0):


And we want to show the current volume as a number. Therefore we use the “volumechange”-event and update a simple SPAN every time this event is being fired:

$('myvid').addEvent('volumechange', function(an_event){ $('volmeter').set('html', this.get('volume').toFixed(1)); });
Adding a mute-button

The muted-state of the video overrides the current volume setting. It’s a toggle-button (on/off), so the implementation is also quite straightforward:

Controlling volume via a slider

Buttons are okay, but usually we’re used to control the volume via a slider or knob. Therefore let’s use the mootools Slider (from mootools.more) to control the volume in ten steps.

First we need a container and a knob, here quickly done with a paragraph and a button:

And now we setup the mootools Slider and use its onComplete event to change the volume accordingly:

var mySlider = new Slider('volSliderBg', 'volSlider', { range: [0, 100], wheel: true, snap: true, steps: 10, initialStep: 100, onComplete: function(step){ $('myvid').set('volume', (step.toInt()/100)); } });

As you can see by applying the above workaround we can very naturally use the new attributes and events to build our custom video controls.

All together now – Demo

Embedded video without controls
Scripted playback controls and time display

  play pause 0.0s

Scripted volume/mute controls and volume display


Alternative volume control (via slider)

Event and attribute information

Current Event:

Ready State:

Network State:


Next post will be showing how to realize a time slider (a movable bar showing the current position in the video which can be dragged to jump to a specific position).

And as always: Criticism, feedback etc. are very welcome.