Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
YouTube Fragment Bookmarklet - Link to a specific portion of a video.
/*jslint */
/*global movie_player */
//javascript:
(function () {
var id = document.querySelector('meta[itemprop="videoId"]').content,
markIn,
markOut,
w;
console.info('YouTube Fragment Bookmarklet\n' +
'Keyboard shortcuts:\n' +
'Mark in ........... I\n' +
'Mark out .......... O\n' +
'Open .............. N\n' +
'Exit .............. Esc');
function open() {
var result = 'http://www.youtube.com/v/' + id + '?start=' + markIn + '&end=' + markOut + '&autoplay=1';
w = window.open(result, 'addwindow');
setTimeout(function () {
w.focus();
}, 250);
}
document.addEventListener('keyup', function shortcutsHandler(e) {
if (e.keyCode === 73) {
markIn = movie_player.getCurrentTime();
console.info('Start set to ' + markIn +
'\nNow pick End time.');
} else if (e.keyCode === 79) {
markOut = movie_player.getCurrentTime();
if (markOut < markIn) {
console.warn('End time is before start time. Try again!');
} else {
console.info('End time set to ' + markOut +
'\nNow press N to open the video fragment in a new window');
}
}
if (markIn && markOut && markIn < markOut && e.keyCode === 78) {
open();
}
if (e.keyCode === 27) {
document.removeEventListener('keyup', shortcutsHandler);
console.info('YouTube Fragment Bookmarklet says goodbye!');
}
});
}());
@akaleeroy

This comment has been minimized.

Copy link
Owner Author

commented Aug 23, 2014

YouTube Fragment Bookmarklet

Enables you to generate a link to a specific portion of a YouTube video. This media fragment format differs from the deep link format (#t=03m58s) in that you can specify a start and end time:

http://www.youtube.com/v/deRrffU-jk4?start=340.130941&end=369.228941&autoplay=1

Usage

While watching a video on YouTube.com, click the bookmarklet.

A set of keyboard shortcuts activates:

Mark in ............. I

Sets the start parameter to where you are in the video at the moment.
Example value: 340.130941

Mark out ........... O

Sets the end parameter to where you are in the video at the moment.
Example value: 369.228941

Open ................ N

Opens a new window with the media fragment
Example value: http://www.youtube.com/v/deRrffU-jk4?start=340.130941&end=369.228941&autoplay=1

Exit .................. Esc

Disables the keyboard shortcuts

Misc

What I've found about YouTube media fragment links:

  • AS3 Flash Player (/v/), which is deprecated as of January 2015, supports precise seeking (end=365.728416).
    For instance "This is socioeconomic entropy" would fail with the HTML5 player because it cuts off words from the next sentence spoken.
  • HTML5 (/embed/) only supports positive integers (end=366)
  • Deep link with #t=365.7 accepts precise seeking but doesn't allow end time.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.