#JS-Thumb

Thumbnail all the things, client-side!

##Demo

Live demo

##Usage

var jsthumb = require("jsthumb")
  //When taking a screenshot from a video, it's best to supply the original dimensions of the video
  , screenshotOpts = {
      origWidth: 400
    , origHeight: 400
    }
  //When resizing, you have to specify a maxWidth and maxHeight, and the original dimensions are recommended but optional
  , resizingOpts = {
      origWidth: 400
    , origHeight: 400
    , maxWidth:200
    , maxHeight:200
    }
  //All these methods return a Base64 encoded string
  , videoThumbnail = jsthumb.screenshot(document.getElementById("my_video_tag"), screenshotOpts)
  , imageThumbnail = jsthumb.resize(document.getElementById("my_image_tag"), resizingOpts);


//You can also directly resize Base64 encoded data, but you'll need to provide a callback for that
jsthumb.resizeData(imageData, opts, function(err, base64Data) {
  //Do something with base64Data
});

//To load thumbnails in the browser
var myImage = new Image();
myImage.src = videoThumbnail;

##Loading Media

It's not trivial figuring out when a video element is ready for thumbnailing. To remedy this problem, we provide a helper method that loads a video and fires a callback when it's ready for use.

var videoOpts = {
    sources: [
      {
        src: "media/lego.mp4"
      , type: "video/mp4"
      }
    ]
  , attributes: {
      //Required, must be unique for each element
      id: "example_video"
      
      // Optional, will resize video to fit parent element, maintaining aspect ratio
    , resize: true
    }
  };

//Appends the video to the body of the page
jsthumb.loadVideo(document.body, videoOpts, function (err, element, player, supported) {
  var video = $(element).find("video")[0];
  
  //This is the container div with all the Video.js controls
  ok(element, "Video container exists");
  
  //This is the actual video tag
  ok(video, "Video element exists");
  
  //This is the Video.js player
  ok(player, "Player exists");
  
  //This tells you whether or not thumbnailing is supported
  ok(supported, "Thumbnailing is available");
});

You can use .loadVideo to load the same video file multiple times on your page, just remember to set a different id attribute for each one.

##Broken?

###HTML5 Video JS-Thumb relies on the HTML5 <video> tag. Firefox and Opera at this time of writing do not support playing .mp4 videos with the <video> tag. If you use .loadVideo then these browsers will fall back to the flash player, which does not support thumbnailing.

###Mobile Thumbnailing on iOS and Android devices is not supported at this time due to browser limitations. .loadVideo will still create a playable video, however.

##CI We're broken on Travis-CI because PhantomJS does not yet support media like video and audio. If you have an idea of how to overcome this, I'm all ears!