Skip to content

kaltura-vpaas/VideoThumbnailAnimator2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Using the Kaltura Video Thumbnails Animator

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.

The percentages based background image size/position logic

  • 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).

Setting up

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"></div>
  <script>
    var thumbAnimator = new KalturaThumbAnimator();
    thumbAnimator.setup("videothumbnail", undefined, 0, true); //use blurred deffered loading
      //thumbAnimator.setup("videothumbnail"); //regular load
  </script>
</body>

Per Thumbnail Parameters

Passed as attributes on the thumbnail divs:

Required Parameters

  • 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).

Optional Parameters

  • kfps - Frames per second (how many frames to show per second in the animation, default is 4.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 that roundup(kslices / (videoSeconds / 2)) + 1 generally provides a good experience.

  • kquality - The JPEG compression quality (0-100, default is 75) (will be generated by the Kaltura thumbnail API).

  • 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).

thumbAnimator.setup(thumbClassName, kalturaDomain, startFrame, useLazy, lazyFilter) Parameters

  • 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: https://www.kaltura.com) pass undefined for default.
  • 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 set startFrame to 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%)).

How you can help (guidelines for contributors)

Thank you for helping Kaltura grow! If you'd like to contribute please follow these steps:

Where to get help

Get in touch

You can learn more about Kaltura and start a free trial at: http://corp.kaltura.com
Contact us via Twitter @Kaltura or email: [email protected]
We'd love to hear from you!

License and Copyright Information

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published