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

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>
      <tr>
        <th>readyState</th>
        <td><span class="ready-state"></span>

        </td>
      </tr>
      <tr>
        <th>currentTime</th>
        <td>
          <input class="time-slider" type="range" disabled value="0" step="any" />
        </td>
      </tr>
      <tr>
        <th>play</th>
        <td>
          <input value="play"...

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', player).prop('disabled', true);
      $('span.duration', player).text('--');
      $('span.current-time', player).text(0);
      $('span.network-state', player).text(0);
      $('span.ready-state',...