YouTube Storyboard Bookmarklet – JavaScript

YouTube Image Frames is bookmarklet that extracts all the storyboard images of any YouTube video.

/*
    YouTube Storyboard Frames
    -------------------------
    Written by Amit Agarwal (amit @labnol.org)
    See video demo at http://youtu.be/Y6yfGGxXyHw
*/

// Extract the Storyboard URL from the HTML Source
 a = yt.playerConfig.args.storyboard_spec;

// If the Storyboard parameter is missing, no thumbnails would be generated
 if (!a) {
    alert("Sorry we had trouble creating a storyboard for this YouTube video.");
    exit();
 }

// Parse the Storyboard URL to get the base and unique ID of thumbnail images
 b = a.split("|");
 base = b[0].split("$")[0] + "2/M";
 c = b[3].split("#");
 sigh = c[c.length - 1];

// Get the length of the YouTube video 
// If the video is longer than 20 minutes, the storyboard has more image frames
 t = yt.playerConfig.args.length_seconds;
 n = (t < 60 * 20) ? 5 : t / (60 * 4);

// Queue all the thumbnail images
 var imgs = "";
 for (i = 0; i < n; i++) {
   imgs += "
";
 }

// Extract the YouTube video title
 var title = yt.playerConfig.args.title;
 msg  = ""
        + "
TITLE
IMAGES
";

 msg = msg.replace("TITLE", title);
 msg = msg.replace("IMAGES", imgs); 

// Put everything in an HTML page and open it in a new window
 var labnol = window.open();
 labnol.document.open();
 labnol.document.write(msg);
 labnol.document.close();

// When you click the bookmarklet, all the 
// available storyboard frames will open in a new window