JS-Thumb
Thumbnail all the things, client-side!
Demo
Usage
var 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 imageThumbnail = jsthumb; //You can also directly resize Base64 encoded data, but you'll need to provide a callback for thatjsthumb; //To load thumbnails in the browservar myImage = ;myImagesrc = 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 pagejsthumb;
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!