Stand alone player runtime overrides

This page demonstrates some of the dynamic overrides of the kaltura player.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
    "plugins": {
        "topBarContainer": {},
        "titleLabel": {},
        "controlBarContainer": {
            "hover": true
        },
        "largePlayBtn": {},
        "scrubber": {
            "thumbSlicesUrl": "{mediaProxy.entryMetadata.thumbSlicesUrl}"
        },
        "vast": {
            "trackCuePoints": "true",
            "timeout": 4
        },
        "skipBtn": {
            "label": "Skip Ad"
        },
        "noticeMessage": {
            "text": "Advertisment {sequenceProxy.timeRemaining|timeFormat}"
        },
        "related": {
            "template": "<h3>Custom Related Template</h3>\n<div class=\"item featured\" data-entry-id=\"<%=nextItem.id%>\" data-click=\"changeMedia\">\n\t<div class=\"item-inner\">\n\t\t<div class=\"title\">\n\t\t\t<% if( self.getConfig('autoContinueTime') ) { %>\n\t\t\tNext <span class=\"time\">in: \n\t\t\t\t\t<span class=\"remaining\">{related.timeRemaining|timeFormat}</span>\n\t\t\t\t</span><br />\n\t\t\t<% } %>\n\t\t\t<%=nextItem.name%>\n\t\t</div>\n\t\t<img class=\"<%= ( nextItem.width / nextItem.height  > 1.34 ) ? 'wide':'square' %>\"\n\t\t\talt=\"<%=nextItem.name%>\" src=\"<%=nextItem.thumbnailUrl%>/width/450\" />\n\t</div>\n</div>\n<% $.each(moreItems, function(idx, item) { %>\n<div class=\"item small\" data-entry-id=\"<%=item.id%>\" data-click=\"changeMedia\">\n\t<div class=\"item-inner\"> \\n\t\t<div class=\"title\"><%=item.name%></div>\n\t\t<img class=\"<%= ( item.width / item.height  > 1.34 ) ? 'wide':'square' %>\"\n\t\t\talt=\"<%=item.name%>\" src=\"<%=item.thumbnailUrl%>/width/350\" />\n\t</div>\n</div>\n<% }); %>"
        },
        "playPauseBtn": {},
        "volumeControl": {},
        "fullScreenBtn": {},
        "durationLabel": {},
        "currentTimeLabel": {},
        "sourceSelector": {},
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Update player json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
    "entry": {
        "id": "my_entry_key",
        "name": "My ToolKit Video",
        "description": "Kaltura Player toolkit Description.",
        "plays": 1234,
        "views": 47332,
        "duration": 114,
        "createdAt": 1379965720,
        "thumbnailUrl": "http://cdnbakmi.kaltura.com/p/243342/sp/24334200/thumbnail/entry_id/1_sf5ovm7u/version/100003/width/640"
    },
    "entryCuePoints": [
        {
            "protocolType": 1,
            "adType": 1,
            "cuePointType": "adCuePoint.Ad",
            "startTime": 4936,
            "sourceUrl": "http://projects.kaltura.com/mdale/hotelVastAd.xml"
        }
    ],
    "contextData": {
        "isCountryRestricted": false
    },
    "entryMetadata": {
        "thumbSlicesUrl": "http://cdnbakmi.kaltura.com/p/243342/sp/24334200/thumbnail/entry_id/1_sf5ovm7u/version/100003/width/100/vid_slices/100",
        "AgeGroup": "16"
    },
    "sources": [
        {
            "src": "http://cdnbakmi.kaltura.com/p/243342/sp/24334200/playManifest/entryId/1_sf5ovm7u/flavorId/1_4j0omqcl/format/url/protocol/http/a.webm",
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Update media
1
2
3
4
5
6
7
<div class='panel-right'>
    <div class='created'>Uploaded on {mediaProxy.entry.createdAt|dateFormat}</div>
    <div class='description'>{mediaProxy.entry.description}</div>
</div>
<div class='panel-left'>
    <div class='views'>{mediaProxy.entry.views|numberWithCommas} Views</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Update media info template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span class="share-close icon-share-close"  data-click="closeScreen"></span>
<div class='panel-center'>
<h3>Custom share:</h3>
    <span class="share-alert"></span>
    <div class="share-icons-scroller">
        <div class="icon-play back-btn noselection"></div>
        <div class="icon-play next-btn noselection"></div>
        <div class="share-icons-container">
            <% $.each(networks, function(idx, network){ %>
                <div class="icon-border PIE">
                    <a href="<%=encodeURIComponent(network.template)%>" data-click="openPopup">
                        <% if( network.icon != "" ) { %>
                            <img class="share-network custom-share-network" title="<%=network.name%>" src="<%=network.icon%>">
                        <% }else{ %>
                            <span class="<%=network.cssClass%> share-network" title="<%=network.name%>" id="<%=idx%>"></span>
                        <% } %>
                    </a>
                </div>
            <% }); %>
        </div>
    </div>
    <% if( socialShareEnabled) { %>
        <div class="share-input-container share-container">
            <input class="shareembed-input share-input" value="<%= share.getConfig('shareURL') %>"/>
            <!--div class="share-copy-btn" data-target=".share-input"><%=share.locale.copyLbl%></div>
            <div class="icon-share-Yes share-v-icon"></div-->
        </div>
        <% if( allowTimeOffset) { %>
            <div class="share-input-container share-offset-container">
                <span class="share-label noselection"><%=share.locale.startTimeLbl%></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Update share template
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Update CSS
html5 qunit | flash qunit