This script provides a simple way to dynamically create video thumbnails using Kaltura's Image Transformation API with a tiny, single JS file. The script also including a low-rest blurred loading while the animation stripe loads in the background.
To achieve responsive behavior and adapt to any dimensions, the script uses percentages based CSS logic to create the animated video thumbnails while using CSS stripes of the video animation frames created by the Kaltura Thumbnail API.
- Thumbnail Stripe Width in Percentage: total slices multiplied by 100.
- Thumbnail Stripe X Position in Percentage: the total slices minus 1 (0-index) described as percent (100 divided by total slices minus 1), multiplied by the current slice number (0-index).
View-source on index.html for a quick reference example.
Include the ThumbAnimator script:
<head>
<script src="./KalturaThumbAnimator.js"></script>
</head>
<body>
<div class="videothumbnail" kfps="4.5" kslices="30" kwidth="600" kpid="2421271" kentryid="1_fjqtp7ki" kquality="75" kcrop="2"></div>
<script>
var thumbAnimator = new KalturaThumbAnimator();
thumbAnimator.setup("videothumbnail", "https://cfvod.kaltura.com", 1, true); //use blurred deffered loading
thumbAnimator.setup("videothumbnail"); //regular load
</script>
</body>Passed as attributes on the thumbnail divs:
kslices- Total frames in the CSS Stripe image (will be generated by the Kaltura thumbnail API).kpid- The Kaltura Account ID (Partner ID in KMC Integration Settings).kentryid- The Kaltura Video Entry ID (ID field from the KMC Content Tab).kwidth- Frame width in px (for each single image in the CSS Stripe image - will be generated by the Kaltura thumbnail API).kfps- Frames per second (how many frames to show per second in the animation, default is4.5). You can further optimize the experience by calculating the kfps param dynamically based on the video duration and set number of frames in the slice (subjective tests show thatroundup(kslices / (videoSeconds / 2)) + 1generally provides a good experience.kquality- The JPEG compression quality (0-100, default is100) (will be generated by the Kaltura thumbnail API).kcrop- The Crop Type to be passed to the Kaltura Thumbnail API (default is5: Stretch to width).kstartsec- The second (float) to begin extracting the slices stripe from (if ommitted or -1, will default to 0).kendsec- The second (float) to end extracting the slices stripe at (if ommitted or -1, will default to the entry's duration).
thumbClassName- The CSS class name to apply the ThumbAnimator logic on.kalturaDomain- The Kaltura API host to work on (leave default if using Kaltura.com as your service, default:://cfvod.kaltura.com).startFrame- Often videos begin with a black frame (e.g. fade from black transition), this makes for an unpleasant thumbnail frame. To avoid it, you can setstartFrameto begin from a non-0 frame, which will increase the chances of a more interesting frame being used as the static thumbnail shown while not during hover animation (default: 0).useLazy- Apply blurred deferred background loading (true) or load stripes directly (default:false).lazyFilter- The CSS filter to apply as blurring effect while bg loading the full stripe (default:blur(3px) grayscale(100%) brightness(130%)).
Thank you for helping Kaltura grow! If you'd like to contribute please follow these steps:
- Use the repository issues tracker to report bugs or feature requests
- Read Contributing Code to the Kaltura Platform
- Sign the Kaltura Contributor License Agreement
- Join the Kaltura Community Forums to ask questions or start discussions
- Read the Code of conduct and be patient and respectful
You can learn more about Kaltura and start a free trial at: http://corp.kaltura.com
Contact us via Twitter @Kaltura or email: community@kaltura.com
We'd love to hear from you!
All code in this project is released under the AGPLv3 license unless a different license for a particular library is specified in the applicable library path.
Copyright © Kaltura Inc. All rights reserved.
Authors and contributors: See GitHub contributors list.