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

[Tech Support]

Here is what we want to display:

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>
                    </a>
             {{/section}}
      </div>
{{/if}}

 

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.