Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
User script to add support for Media Fragment time offsets (e.g. #t=20) to standalone HTML5 media elements.
// ==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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment