Categories
Code

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