simple video player with custom controls using html5 video and input[type=range] element

by Chris

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div class="player">
    <div class="mediaplayer">
        <video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none">
            <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" />
        </video>
    </div>
    <hr />
    <p><a href="http://afarkas.github.io/webshim/demos/index.html#Media-elements">webshims mediaelement documentation</a></p>
    <hr />
    <table>
        <thead>
            <th>property</th>
            <th>value/control</th>
        </thead>
        <tbody>
            <tr>
                <th>currentTime</th>
                <td><span class="current-time"></span>

                </td>
            </tr>
            <tr>
                <th>duration</th>
                <td><span class="duration"></span>

                </td>
            </tr>
            <tr>
                <th>progress</th>
                <td><span class="progress">0</span>

                </td>
            </tr>
            <tr>
                <th>paused-state</th>
                <td><span class="paused-state">true</span>

                </td>
            </tr>
            <tr>
                <th>muted-state</th>
                <td><span class="muted-state">false</span>

                </td>
            </tr>
            <tr>
                <th>volume</th>
                <td><span class="volume">1</span>

                </td>
            </tr>
            <tr>
                <th>videoWidth/videoHeight</th>
                <td><span class="height-width">-/-</span>

                </td>
            </tr>
            <tr>
                <th>networkState</th>
                <td><span class="network-state"></span>

                </td>
            </tr>
           ...

CSS

.player {
    margin: auto;
    padding: 10px;
    width: 90%;
    max-width: 900px;
    min-width: 320px;
}
.mediaplayer {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16/9 */
}
.mediaplayer video, .mediaplayer .polyfill-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

JavaScript

if (window.webshim) {
    (function () {
        
        webshim.setOptions('mediaelement', {
            replaceUI: 'auto'
        });
        webshim.setOptions({types: 'range'});
        webshim.setOptions('extendNative', true);
        webshim.polyfill('mediaelement forms forms-ext');
    })();
}


//add some controls
jQuery(function ($) {
    $('div.player').each(function () {
        var player = this;
        var getSetCurrentTime = createGetSetHandler(

        function () {
            $('input.time-slider', player).prop('value', $.prop(this, 'currentTime'));
        }, function () {
            try {
                $('video, audio', player).prop('currentTime', $.prop(this, 'value'));
            } catch (er) {}
        });
        var getSetVolume = createGetSetHandler(

        function () {
            $('input.volume-slider', player).prop('value', $.prop(this, 'volume'));

        }, function () {
            $('video, audio', player).prop('volume', $.prop(this, 'value'));
        });
        $('video, audio', this).bind('durationchange updateMediaState', function () {
            var duration = $.prop(this, 'duration');
            if (!duration) {
                return;
            }
            $('input.time-slider', player).prop({
                'max': duration,
                disabled: false
            });
            $('span.duration', player).text(duration);
        }).bind('progress updateMediaState', function () {
            var buffered = $.prop(this, 'buffered');
            if (!buffered || !buffered.length) {
                return;
            }
            buffered = getActiveTimeRange(buffered, $.prop(this, 'currentTime'));
            $('span.progress', player).text(buffered[2]);
        }).bind('timeupdate', function () {
            $('span.current-time', player).text($.prop(this, 'currentTime'));
        }).bind('timeupdate', getSetCurrentTime.get).bind('emptied', function () {
            $('input.time-slider',...