Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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) You should have new KVS theme (check your index page source if you have main.min.js script included, then you can use this).
    2) You should have at least KVS 3.8.5 version.
    3) If you have many videos, creating previews can take much time, up to many months!
    4) You should make sure that each storage server has enough space to store up to 1mb for each video.
    5) Each preview will take 600-800kb, so showing this for every video will increase your traffic usage.

    Steps on how to enable video previews

    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):
    Code:
    -vcodec libx264 -movflags +faststart -threads 0 -r 25 -g 50 -crf 28 -me_method hex -trellis 0 -bf 8 -an -f mp4
    Click image for larger version  Name:	temp.png Views:	1 Size:	21.5 KB ID:	139

    - 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. Click image for larger version  Name:	temp.png Views:	1 Size:	11.7 KB ID:	136

    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:
    http://kvs-demo.com/admin/formats_videos.php

    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: Click image for larger version  Name:	temp.png Views:	1 Size:	5.3 KB ID:	137
    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.

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

    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.

    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.

    6) Go to Settings -> Content settings -> Video download script protection settings section. If IP limit is enabled then increase the number of videos to 500 or above. Since each of your visitor can now access many video files quickly, you should prevent their IPs from being blocked. If IP limit is disabled, then you don't need to change anything.

    Styling waiting icon

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

    Code:
    .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;
    }
    Troubleshooting

    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: Click image for larger version  Name:	temp.png Views:	1 Size:	2.8 KB ID:	138
    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.

  • #2
    Hello! its really great and thank you for sharing this information with us.

    Comment


    • #3
      Since this functionality is bundled into theme 5.0 version, the main post does not show some steps, which are not required if you have theme version 5.0 or above.

      You can check your theme version in Website UI -> Theme Settings. If you don't have any version displayed there, or the displayed version is less than 5.0, then you also need to perform these additional steps:

      1) Check this script if it contains data-preview (search for this text in script source):
      http://yourdomain.com/js/main.min.js

      If not, then update it with the following version:
      http://kvs-demo.com/js/main.min.js

      2) Go to Website UI -> Page components -> include_list_videos_block_common.tpl. Search template for <img class="thumb and you should be able to find this line (can be slightly different in your case):

      HTML Code:
      <img class="thumb {{if $lang.enable_thumb_lazyload=='true'}}lazy-load{{/if}}" {{if $lang.enable_thumb_lazyload=='true'}}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original{{else}}src{{/if}}="{{$item.screen_url}}/{{$lang.videos.thumb_size}}/{{$item.screen_main}}.jpg" alt="{{$item.title}}" {{if $lang.enable_thumb_scrolling=='true'}}data-cnt="{{$item.screen_amount}}"{{/if}} width="{{$lang.videos.thumb_size|geomsize:'width'}}" height="{{$lang.videos.thumb_size|geomsize:'height'}}"/>
      Save this template code locally in order to be able to quickly restore it. After the last attribute and before the ending tag /> please add the following code:

      HTML Code:
      {{if $item.is_private==0 && $item.formats[$lang.videos.preview_video_format_standard].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_standard].file_path}}/"{{/if}} {{if $item.is_private==2 && $item.formats[$lang.videos.preview_video_format_premium].file_path!=''}}data-preview="{{$config.project_url}}/get_file/{{$item.server_group_id}}/{{$item.formats[$lang.videos.preview_video_format_premium].file_path}}/"{{/if}}
      NOTE: Make sure you don't break HTML syntax of this line and keep the necessary spaces.
      Save and check if your site correctly displays video list. If something is wrong, just restore the original template code and try again.

      3) Go to Website UI -> Add text and create the following text item:

      External ID: videos.preview_video_format_standard
      Default: _preview.mp4

      Save.

      You can add the following styles to your CSS stylesheet to show waiting icon when the preview is loading (there is no guarantee this style will work in your case if you modified theme CSS):

      Code:
      .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;
      }
      You can take these icons if you need:
      http://kvs-demo.com/images/loader.gif
      http://kvs-demo.com/images/white/loader.gif

      If video lists are broken after modifying template. Most probably you broke HTML syntax doing step 2 described in this post, restore the old template and try again. Make sure you leave a whitespace before and after the code you are adding.

      If you see white page or video lists are not displayed at all. This can happen if you broke Smarty syntax in template, restore the old template and try again. Make sure you copied all {{ and }} tags fully.

      Comment

      Working...
      X