User script to add support for Media Fragment time offsets (e.g. #t=20) to standalone HTML5 media elements.

media-fragments-for-media-elements.user.js

// ==UserScript==
// @name           Media Fragments for Media Elements
// @description    Adds support for Media Fragment time offsets (e.g. #t=20) to standalone HTML5 media elements (i.e. audio, video); allows you to bookmark time indexes by in media (via pausing) and then navigate between them with browser navigation.
// @namespace      http://weston.ruter.net/
// @include        *
// ==/UserScript==

/**
 * Issues or potential issues:
 *  - If currentTime gets set too soon (before media initializes) does an error occur?
 *  - Firefox is not working
 *
 * Other improvements to do in other user scripts:
 *  - Make sure media element is full width (or is resizable)
 *  - Inspect the media to obtain the title and description and provide for hosting page
 */

var mediaElement = document.querySelector('body > [controls]:first-child');

if(mediaElement &&
   mediaElement.canPlayType &&
   (!mediaElement.nextElementSibling || mediaElement.nextElementSibling.id == '_firebugConsole') //aka :only-child
){
    
    /**
     * Update the currentTime (seek position) when the hash changes.
     */
    function hashchange(e){
        var matches = location.hash.match(/(?:#|&)t=(\d+(?:\.\d+)?)/);
        if(matches){
            mediaElement.currentTime = matches[1];
        }
    }
    window.addEventListener('hashchange', hashchange, false);
    hashchange();
    
    /**
     * Update the media fragment whenever we pause to create a bookmark
     * @todo There's probably other times that we want to be able to create a bookmark (no pun intended)
     */
    mediaElement.addEventListener('pause', function(e){
        location.hash = "#t=" + this.currentTime;
    }, false);
    
}