<video width=425 height=240 id="trailer" preload controls> <source src="http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="http://playground.html5rocks.com/samples/html5_misc/chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="http://playground.html5rocks.com/samples/html5_misc/chrome_japan.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video> <div id='container'> <div id='slider'></div> </div>
makeSlider() var video = document.getElementById("trailer"), time = can.compute(video,"currentTime","timeupdate"), duration = can.compute(video,"duration","durationchange"); var progress = can.compute(function(newPercent){ // can only do anything if duration is ready var durationValue = duration(); if(typeof durationValue == "number" && !isNaN(durationValue)){ if(arguments.length){ time(newPercent * durationValue) } else { return time() / durationValue; } } }) new Slider("#slider",{ value: progress }) function makeSlider(){ Slider = can.Control.extend({ init: function(){ this.updatePosition() }, "draginit": function(el, ev, drag){ drag.limit(this.element.parent()); drag.horizontal(); this.dragging = true; }, "dragmove": function(el, ev, drag){ var container = this.element.parent(), sliderOffset = el.offset().left, containerOffset = container.offset().left, sliderWidth = el.outerWidth(), containerWidth = container.width(); containerOffset += parseInt( container.css("paddingLeft") ) + parseInt( container.css("borderLeftWidth") ) var value = ( (sliderOffset-containerOffset ) / (containerWidth - sliderWidth) ); this.options.value(value) }, "dragend": function(){ this.dragging = false; }, "{value} change": "updatePosition", updatePosition: function(){ if(this.dragging){ return; } var value = this.options.value(), container = this.element.parent(), containerOffset = container.offset().left, sliderWidth = this.element.outerWidth(), containerWidth = container.width(); containerOffset += parseInt( container.css("paddingLeft") ) + parseInt( container.css("borderLeftWidth") ) var sliderOffset = containerOffset+ ( (containerWidth - sliderWidth) * (value) ) this.element.offset({ left: sliderOffset }) }, "resize": "updatePosition" }); }