Video scrubbing with slider

Not made by me.

HTML

note: this version trys to fix wrong input/change event implementation in chrome/ie
<div class="mediaplayer">
    <video controls preload autoplay muted playsinline>
        <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
        <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
        <p>You need a modern Browser or install the Flash Plugin or simply download the video (<a href="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v">mp4</a>, <a href="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm">webm</a>)</p>
    </video>
    <div class="mediacontrols">
        <input type="range" value="0" step="any" class="seekbar" disabled="" />
    </div>
</div>

CSS

.mediaplayer {
    width: 480px;
}
.mediaplayer video {
    width: 100%;
    height: 240px;
}

JavaScript

(function () {
    //simple feature test
    if (!document.createElement('video').canPlayType) {
        return;
    }


    //the mediaplayer is the wrapper for all controls
    function createPlayer(mediaplayer) {
        var video = mediaplayer.querySelector('video');
        var seekBar = mediaplayer.querySelector('.seekbar');

        if (seekBar) {
            createSeekBar(video, seekBar);
        }
    }

    function createRangeInputChangeHelper(range, inputFn, changeFn) {
        var inputTimer, releaseTimer, isActive;

        var destroyRelease = function () {
            clearTimeout(releaseTimer);
            range.removeEventListener('blur', releaseRange, false);
            document.removeEventListener('mouseup', releaseRange, false);
        };
        var setupRelease = function () {
            if (!isActive) {
                destroyRelease();
                isActive = true;
                range.addEventListener('blur', releaseRange, false);
                document.addEventListener('mouseup', releaseRange, true);
            }
        };
        var _releaseRange = function () {
            if (isActive) {
                destroyRelease();
                isActive = false;
                if (changeFn) {
                    changeFn();
                }
            }
        };
        var releaseRange = function () {
            setTimeout(_releaseRange, 9);
        };
        var onInput = function () {
            if (inputFn) {
                clearTimeout(inputTimer);
                inputTimer = setTimeout(inputFn);
            }
            clearTimeout(releaseTimer);
            releaseTimer = setTimeout(releaseRange, 999);
            if (!isActive) {
                setupRelease();
            }
        };

        range.addEventListener('input', onInput, false);
        range.addEventListener('change', onInput, false);
    }

    function createSeekBar(video, seekBar) {
        var duration, videoWasPaused;
        var blockSeek...