Client-side video & image thumbnailing
Thumbnail all the things, client-side!
var jsthumb = require"jsthumb"//When taking a screenshot from a video, it's best to supply the original dimensions of the videoscreenshotOpts =origWidth: 400origHeight: 400//When resizing, you have to specify a maxWidth and maxHeight, and the original dimensions are recommended but optionalresizingOpts =origWidth: 400origHeight: 400maxWidth:200maxHeight:200//All these methods return a Base64 encoded stringvideoThumbnail = jsthumbscreenshotdocumentgetElementById"my_video_tag" screenshotOptsimageThumbnail = jsthumbresizedocumentgetElementById"my_image_tag" resizingOpts;//You can also directly resize Base64 encoded data, but you'll need to provide a callback for thatjsthumbresizeDataimageData opts//Do something with base64Data;//To load thumbnails in the browservar myImage = ;myImagesrc = videoThumbnail;
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 elementid: "example_video"// Optional, will resize video to fit parent element, maintaining aspect ratioresize: true;//Appends the video to the body of the pagejsthumbloadVideodocumentbody videoOptsvar video = $elementfind"video"0;//This is the container div with all the Video.js controlsokelement "Video container exists";//This is the actual video tagokvideo "Video element exists";//This is the Video.js playerokplayer "Player exists";//This tells you whether or not thumbnailing is supportedoksupported "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.
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.
Thumbnailing on iOS and Android devices is not supported at this time due to browser limitations.
.loadVideo will still create a playable video, however.
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!