{"id":4295,"date":"2010-03-05T00:51:19","date_gmt":"2010-03-04T23:51:19","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=4295"},"modified":"2018-01-10T13:41:55","modified_gmt":"2018-01-10T12:41:55","slug":"html-5-video-mootools-part-2","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2010\/03\/05\/html-5-video-mootools-part-2\/","title":{"rendered":"HTML 5 video & mootools, part 2: Timeline"},"content":{"rendered":"

After creating buttons and a volume slider in the last post<\/a>, we’re now going to develop a time slider — a movable slider which shows the current time of the video and which can be dragged to move the video playback accordingly.<\/p>\n

Needed are two methods: Update the slider when the video is played and update the video when the slider is moved.<\/p>\n

From time to range<\/h5>\n

The position of the slider relative to its width (or range) should correspond the relative timing position of the video (relative to its duration).<\/p>\n

So we have:<\/p>\n

\nposition = time \/ duration * range\n<\/p>\n

updatePosition: function(time)<\/h5>\n

Is called onTimeupdate at the video<\/p>\n

The first one is called on every timeupdate<\/kbd>-event: It receives the current time from the video, converts it relative to the slider range and then moves the slider to the calculated position.<\/p>\n

updateVideo: function(position)<\/h5>\n

Is called onChange at the slider<\/p>\n

The second is the other way around: On changing the slider position we calculate the video position the other way around and move the video playback to that position.<\/p>\n

Fireworks and other problems<\/h5>\n

Unfortunately moving the slider (updating the video time) triggers the timeupdate event, which then moves the slider, which then … A nice fireworks of events – which we better try to avoid. In order to prevent one event from triggering the other, we do not call the set()-method from Slider if the video time has changed (which would then fire an onChange event) but we move the slider by updating the knob position.<\/p>\n

We also have to avoid updating the slider if the video is in the seeking<\/kbd>-state, because then the knob would jump around while the video is still loading data to find the target position.<\/p>\n

Extending the slider<\/h5>\n

I created a new class (CwVideotimeline) with the methods described above. It is an extension of the Slider-class and automatically attaches the methods to the video events.<\/p>\n

Class definition<\/h5>\n
\r\nCwVideotimeline = new Class({\r\n\r\n\tImplements: [Events, Options],\r\n\tExtends: Slider,\r\n\t\r\n\toptions: {\r\n\t\tvideo: false,\r\n\t\tonChange: function(position) {\r\n\t\t\tthis.updateVideo(position);\r\n\t\t}\r\n\t},\r\n\t\r\n\tinitialize: function(element, knob, options)\r\n\t{\r\n\t\tthis.parent(element, knob, options);\r\n\t\tthis.setOptions(options);\r\n\t\t\r\n\t\t\/\/ on video timeupdate: call updatePosition\t\t\r\n\t\t$(this.options.video).addEvent('timeupdate', function(an_event) {\r\n\t\t\tthis.updatePosition(an_event.target.get('currentTime'));\r\n\t\t}.bind(this));\r\n\r\n\t\t\/\/ if we have finished seeking in the video: update the time\r\n\t\t$(this.options.video).addEvent('seeked', function(an_event) {\r\n\t\t\tthis.updatePosition(an_event.target.get('currentTime'));\r\n\t\t}.bind(this));\r\n\t},\r\n\t\r\n\tupdatePosition: function(time)\r\n\t{\r\n\t\tduration = $(this.options.video).get('duration');\r\n\t\tif (duration == 0 || this.range == 0 || $(this.options.video).get('seeking')) return; \/\/ we are seeking or video has no duration\r\n\r\n\t\t\/\/ we \"manually\" set the knob position in order to avoid triggering another event\r\n\t\tposition = this.toPosition( time \/ duration * this.range );\r\n\t\tthis.knob.setStyle(this.property, position);\t\t\r\n\t},\r\n\t\r\n\tupdateVideo: function(position)\r\n\t{\r\n\t\tduration = $(this.options.video).get('duration');\r\n\t\tif (duration == 0 || this.range == 0) return;\r\n\t\tvideotime = ( position \/ this.range * duration); \/\/ from position to time\r\n\t\t$(this.options.video).set('currentTime', videotime);\r\n\t}\t\r\n\r\n});\r\n<\/pre>\n
Class usage example<\/h5>\n
\r\nvar timeSlider = new CwVideotimeline('container', 'knob', {\r\n    range: [0, 200],\r\n    video: 'myvid',\r\n    steps: 100,\r\n    initialStep: 0\r\n});\r\n<\/pre>\n
Chrome problems<\/h5>\n
Of course one browser always makes trouble: This time it’s Chrome, which does not continue to send timeupdate<\/kbd>-events after seeking and suspending the video download. It’s a known bug, so hopefully fixed in the next version. Details: (Bugtracker for Chrome<\/a>)<\/p>\n
Example<\/h5>\n
See it in action below – note that not only dragging but also clicking the timline works (this is because Fx.Slider already handles this) and the rewind-button automatically updates the slider:<\/p>\n
\t