Announcement

Collapse
No announcement yet.

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

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

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

    Here is what we want to display:

    Click image for larger version  Name:	screenshot.png Views:	0 Size:	110.8 KB ID:	1213

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

    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:

    Code:
    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:

    Code:
    {{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.
Working...
X