Remembers the playback position of media and resumes on page load. The playhead position is set on the media events: play, pause, and seeked; as well the position is recorded at an interval defined in the options, anytime the media is playing.

jquery.resume_playback.js

/**
 * HTML5 Media Resume Playback (Playhead Position Memory) jQuery Plugin
 *
 * Remembers the playback position of media and resumes on page load. The
 * playhead position is set on the media events: play, pause, and seeked; as
 * well the position is recorded at an interval defined in the options, anytime
 * the media is playing.
 *
 * Requires the jStorage plugin <http://www.jstorage.info/>
 *
 * @param string id
 *   Required. This is used as a unique identifier for storing this video's playback
 *   position. It does NOT have to coincide with the DOM id.
 * @param options Optional.
 * - int refresh: Optional, defaults to 1000. The number of microseconds between storage
 * of the playback position during a playback.
 * - func resuming: A function to call if we are about to resume, but before
 *   resuming, a.k.a., pre-resume
 * - func resumed: A callback function that will be triggered when the media
 *   playhead has resumed it's position. It takes the following arguments:
 *   $player, resumeAt.
 * - int timeout: set a timeout in seconds for the resumed callback to fire,
 *   even if the video doesn't resume. On idevices it doesn't seem to resume on
 *   load so this is a good idea.
 *
 * @return this
 *
 * @author Aaron Klump, In the Loft Studios, LLC
 * @see http://www.intheloftstudios.com
 * @see http://gist.github.com/aklump/6252230
 */
(function($) {
  $.fn.resumePlayback = function(id, options) {

    if (!id) {
      return false;
    }

    var $player           = $(this);
    var player            = $player.get();
    var playInterval      = null;
    var resumedInterval   = null;
    var resumeAt          = null;

    function set(time) {
      $.jStorage.set('resumePlayback_' + id, time);
    }

    function get() {
      return $.jStorage.get('resumePlayback_' + id, 0);
    }

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'refresh'     : 1000,
      'resuming'    : false,
      'resumed'     : false,
      'timeout'     : 2000,
    }, options);


    // Resume playback position
    if ((resumeAt = get())) {

      // Callback before resuming
      if (settings.resuming) {
        settings.resuming($player, resumeAt);
      }

      // If we have a resumed callback then set up the monitor to wait until the
      // player has been resumed to the playback position and then fire.
      // Sometimes it won't fire so we have a timeout value to fire the event
      // anyway
      if (settings.resumed) {
        var elapsed = 0;
        var interval = 100;
        resumedInterval = setInterval(function() {
          elapsed += interval;
          if ((player[0].currentTime === resumeAt && !player[0].seeking) || (settings.timeout && elapsed > settings.timeout)) {
            clearInterval(resumedInterval);
            settings.resumed($player, resumeAt);
          }
        }, interval);
      }

      // Wait for the player to be ready and then resume the playhead position.
      // But immediately unbind or we have wierd seek problems.
      var waitForCanPlay = function () {
        player[0].currentTime = resumeAt;
        $player.unbind('canplay', waitForCanPlay);
      };
      $player.bind('canplay', waitForCanPlay);
    }

    // Set the playback position
    // http://www.w3schools.com/tags/ref_av_dom.asp
    $player.bind('play seeked pause', function(e) {
      switch (e.type) {
        case 'play':
          playInterval = setInterval(function() {
            set(player[0].currentTime);
          }, settings.refresh);
          break;

        case 'pause':
          clearInterval(playInterval);
          break;

        default:
          set(player[0].currentTime);
          break;
      }
    });

    return resumeAt;
  };
})(jQuery);