Jump to content

Theme customization: how to show player timeline screenshots outside player and make them clickable

Tech Support

Recommended Posts

Here is what we want to display:screenshot.png.47dfa51d6f21970dd634156ba7d661b1.png

Go to Website UI -> Pages -> View Video -> Video View block editing. In its template code locate player initialization code:

kt_player('kt_player', '{{$config.project_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', flashvars);


Adjust this code a bit to assign its result to player_obj variable as the following:

var player_obj = kt_player('kt_player', '{{$config.project_url}}/player/kt_player.swf?v={{$config.project_version}}', '100%', '100%', flashvars);


Add the following code to the place where you want to render timeline screenshots outside the player:

{{assign var="format_postfix" value=".mp4"}}
{{assign var="screenshot_size" value="180x100"}}
{{if $data.formats[$format_postfix].timeline_screen_amount>0}}
      <div style="text-align: center; padding: 10px">
             {{section name="screenshots" start="0" loop=$data.formats[$format_postfix].timeline_screen_amount}}
                    <a style="cursor: pointer; position: relative; display: inline-block" onclick="player_obj.seek({{$smarty.section.screenshots.index*$data.formats[$format_postfix].timeline_screen_interval}})">
                           <img src="{{$data.screen_url}}/timelines/{{$data.formats[$format_postfix].timeline_directory}}/{{$screenshot_size}}/{{$smarty.section.screenshots.index+1}}.jpg" />
                           {{assign var="timeline_duration" value=$smarty.section.screenshots.index*$data.formats[$format_postfix].timeline_screen_interval}}
                           <span style="position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,0.5); color: white; padding: 2px 5px">{{$timeline_duration|durationToHumanString}}</span>


NOTE: please note the highlighted video format postfix (.mp4) and screenshot format size (180x100). These are given for default KVS configuration, but in your case you should check which your video format has timeline screenshots enabled and which timeline screenshot format you want them to be rendered.

Apply styling as needed. It is also recommended that you move styles to CSS, as using inline styles is not a good practice.

  • Thanks 1
Link to comment
Share on other sites

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