Jump to content

How to create video previews on mouse over with KVS tube script

Tech Support

Recommended Posts

Starting with KVS Advanced you can show video previews for every video in the list instead of single or scrolling thumbs.

Here are some important notes and prerequisites before you start

  1. If you have many videos, creating previews can take much time, up to many months!
  2. You should make sure that each storage server has enough space to store up to 1mb for each video.
  3. Each preview will take 600-800kb, so showing this for every video will increase your traffic usage.


Steps on how to enable video previews

Step 1. In admin panel go to Settings -> Add video format and create new video format with the following data:

  • Title: MP4 preview
  • Postfix: _preview.mp4
  • Video type: Standard videos
  • Status: Active optional (you can set Active required here if you don't have videos or have only few videos)
  • Video size: Resize video according to: NxM Enfore this size (replace NxM with exact size you need video to be displayed in lists)
  • FFmpeg options (-crf 28 is a compression quality, use lower number for higher quality):
    -vcodec libx264 -movflags +faststart -threads 0 -r 25 -g 50 -crf 28 -me_method hex -trellis 0 -bf 8 -an -f mp4


  • Limit duration to: 20 seconds (or any number you want it to be)
  • Number of parts: 4 (or any number of parts you want it to be)
  • Other fields under Duration limitation section - as per your needs.

Save it. NOTE: if you selected Active required status and you have any videos, KVS will automatically create tasks for creating these files for all your videos. You should use Active optional status if you have many vids.

You can see this video format in action here in KVS tube script demo admin panel:



Step 2. Now it is time to create video previews for some test videos. Please skip this step if you already selected Active required status for preview video format.

Go to Videos list. Select some test videos (the ones you can see on your latest updates page) and under Batch actions select Mass edit selected. You will see the mass edit GUI. Scroll down to Content section and select MP4 preview format under Create / Re-create format files:


NOTE: Make sure you didn't select anything else in the big set of options.

Apply changes.

In Administration -> Background Tasks section you can now see list of tasks to create preview files for the selected videos. You should wait until they are processed, this may take a while. If there are errors on these tasks, please contact support.


Step 3. Go to Website UI -> Theme Settings and select MP4 Preview format in Video preview format option.


Step 4. If preview creation tasks are finished at this point, go to your latest videos and try mouse over the test videos you've chosen to create preview files. You should see the video previews playing. If you don't see them, try refreshing your browsers cache with Ctrl+F5.


Step 5. If you are OK with the quality and functionality of your test previews, you can enable them to be created for all videos now. Go to Settings -> Video formats -> MP4 Preview and change status to Active required.

NOTE: this will create tasks for all your videos, which can take long time. All new videos will have this format automatically.


Styling waiting icon

You can modify the following CSS style in your site's style file:

.list-videos .img.preview-loading:after {
display: block;
position: absolute;
content: '';
width: 25px;
height: 25px;
background: #000000 url('../images/loader.gif') 2px 2px no-repeat;
bottom: 5px;
right: 5px;
z-index: 1;



  1. It is not possible to create a new video format. This is not possible if you have KVS basic license. Basic licenses do not support multiple formats and will not allow you using this feature.
  2. Tasks for creating preview files failed. Please create ticket for support, there can be many reasons and need investigation in your admin panel.
  3. Video previews are not displayed. Are you trying on the test videos you have selected for massedit? Please open them in admin panel and check if they have preview formats created: temp.png.6e43cb9f66bb2782057a25a97cd3b781.png
    Did you try resetting browser cache with Ctrl+F5? Are you using the same browser where you logged in admin panel? If using different browsers to test this functionality you should log in to admin panel in each browser. Otherwise you can see the cached page version which has not yet been updated with this new feature.
Link to comment
Share on other sites

  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...