{"id":4252,"date":"2010-03-02T21:22:12","date_gmt":"2010-03-02T20:22:12","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=4252"},"modified":"2018-01-10T13:42:50","modified_gmt":"2018-01-10T12:42:50","slug":"html-5-video-mootools","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2010\/03\/02\/html-5-video-mootools\/","title":{"rendered":"HTML 5 video & Mootools"},"content":{"rendered":"

This is about scripting the HTML 5 video-tag with Mootools 1.2.<\/p>\n

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.<\/p>\n

Read more about it at Lighthouse (mootools bugtracking) »<\/a><\/p>\n

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:<\/p>\n

\r\nvar media_events = {\r\n    loadstart: 2, progress: 2, suspend: 2, abort: 2,\r\n    error: 2, emptied: 2, stalled: 2, play: 2, pause: 2,\r\n    loadedmetadata: 2, loadeddata: 2, waiting: 2, playing: 2,\r\n    canplay: 2, canplaythrough: 2, seeking: 2, seeked: 2,\r\n    timeupdate: 2, ended: 2, ratechange: 2, durationchange: 2, volumechange: 2\r\n}\r\nElement.NativeEvents = $merge(Element.NativeEvents, media_events);\r\n\t\r\nvar media_properties = [\r\n\t'videoWidth', 'videoHeight', 'readyState', 'autobuffer',\r\n\t'error', 'networkState', 'currentTime', 'duration', 'paused', 'seeking',\r\n\t'ended', 'autoplay', 'loop',  'controls', 'volume', 'muted',\r\n\t'startTime', 'buffered', 'defaultPlaybackRate', 'playbackRate', 'played', 'seekable' \/\/ these 6 properties currently don't work in firefox\t\t\r\n];\t\r\nmedia_properties.each(function(prop){\r\n\tElement.Properties.set(prop, {\r\n\t\tset: function(value){\r\n\t\t\tthis[prop] = value;\r\n\t\t},\r\n\t\tget: function(){\r\n\t\t\treturn this[prop];\r\n\t\t}\r\n\t})\r\n});\r\n<\/pre>\n
Please note: This is only a quick workaround until it’s implemented in mootools-core.<\/p>\n
How to realize video playback controls via mootools<\/h4>\n
You can see everything in the demo below<\/p>\n
Play\/Pause\/Rewind<\/h6>\n
This is quite straightforward (using above workaround):<\/p>\n
\r\n<button onclick=\"$('myvid').set('currentTime', 0)\">rewind<\/button>\r\n<button onclick=\"$('myvid').play()\">play<\/button>\r\n<button onclick=\"$('myvid').pause()\">pause<\/button>\r\n<\/pre>\n
Showing the current playback time<\/h6>\n
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:<\/p>\n
\r\n$('myvid').addEvent('timeupdate', function(an_event){\r\n\t$('timemeter').set('html', this.get('currentTime').toFixed(1));\r\n});\r\n<\/pre>\n
Controlling volume via buttons and displaying it<\/h6>\n
Also no rocket science, but we have to look at not exceeding the limits for volume (from 0.0 up to 1.0):<\/p>\n
\r\n<button onclick=\"$('myvid').set('volume', $('myvid').get('volume') < .1 ? 0.0 : $('myvid').get('volume') - 0.10)\">vol-<\/button>\r\n<button onclick=\"$('myvid').set('volume', $('myvid').get('volume') > .9 ? 1.0 : $('myvid').get('volume') + 0.10)\">vol+<\/button>\r\n<span id=\"volmeter\">1.0<\/span>\r\n<\/pre>\n
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:<\/p>\n
\r\n$('myvid').addEvent('volumechange', function(an_event){\r\n\t$('volmeter').set('html', this.get('volume').toFixed(1));\r\n});\r\n<\/pre>\n
Adding a mute<\/q>-button<\/h6>\n
The muted<\/q>-state of the video overrides the current volume setting. It’s a toggle-button (on\/off), so the implementation is also quite straightforward:<\/p>\n
\r\n<button id=\"mutebutton\" onclick=\"$('myvid').set('muted', !$('myvid').get('muted'))\">mute<\/button>\r\n<\/pre>\n
Controlling volume via a slider<\/h6>\n
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.<\/p>\n
First we need a container and a knob, here quickly done with a paragraph and a button:<\/p>\n
\r\n<p id=\"volSliderBg\" style=\"width: 100px; border: 1px solid #75838a;\">\r\n\t<button id=\"volSlider\">vol<\/button>\r\n<\/p>\r\n<\/pre>\n
And now we setup the mootools Slider and use its onComplete event to change the volume accordingly:<\/p>\n
\r\nvar mySlider = new Slider('volSliderBg', 'volSlider', {\r\n    range: [0, 100],\r\n    wheel: true,\r\n    snap: true,\r\n    steps: 10,\r\n    initialStep: 100,\r\n    onComplete: function(step){\r\n\t$('myvid').set('volume', (step.toInt()\/100));\r\n    }\r\n});\r\n<\/pre>\n
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.<\/p>\n
All together now – Demo<\/h4>\n
\t