Edit in JSFiddle

<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()

video = document.getElementById("trailer");

new Slider("#slider",{
    value: can.compute(video,"currentTime","timeupdate"),
    min: can.compute(0),
    max: can.compute(video,"duration","durationchange")
})



function makeSlider(){

    Slider = can.Control.extend({
        init: function(){
            this.updatePosition()
        },
        "draginit": function(el, ev, drag){
            this.dragging = true;
            drag.limit(this.element.parent());
            drag.horizontal();
        },
        "dragmove": function(el, ev, drag){
            
            var container = this.element.parent(),
                sliderOffset = el.offset().left,
                containerOffset = container.offset().left,
                sliderWidth = el.outerWidth(),
                containerWidth = container.width(),
                delta = this.options.max() - this.options.min();
            
            containerOffset +=
                parseInt( container.css("paddingLeft") ) +
                parseInt( container.css("borderLeftWidth") )
            
            var value = ( (sliderOffset-containerOffset ) /
                         (containerWidth - sliderWidth) ) * delta +
                this.options.min();
            
            
            this.options.value(Math.round(value))
        },
        "dragend": function(){
            this.dragging = false;
        },
        "{max} change" : "updatePosition",
        "{min} change" : "updatePosition",
        "{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(),
                delta = this.options.max() - this.options.min();
            
            containerOffset +=
                parseInt( container.css("paddingLeft") ) +
                parseInt( container.css("borderLeftWidth") )
            
            var sliderOffset = containerOffset+
                ( 	(containerWidth - sliderWidth) * 
                 (value+this.options.min()) ) /
                (delta)
            
            this.element.offset({
                left: sliderOffset
            })
        },
        "resize": "updatePosition"
    });
    
}