Tutorial Uso Player THRON Ferrari Custom Skin en 4

Fall
08
A brief guide to use THRON player with custom skin for Ferrari
Tutorial Documentation
Release number: 4.3
Date (mm/dd/yyyy): 07/18/2016
All information, data, ideas, layouts, drawings, schemes and all their combinati
ons thereof are proprietary
information of THRON S.p.A. and may be protected by international copyright laws
and other intellectual property
rights.
Total or partial reproduction, as well as any other use of the information herei
n presented, including layouts,
drawings, schemes is not allowed without written consent of THRON S.p.A.
Copyright THRON S.p.A. All Rights Reserved
Via Dei Contarini, 5/A Piazzola sul Brenta (PD), Italia P.IVA 03586990289
www.thron.com
Pagina 1 di 12
Index
1 Introduction..................................................................
.................................................... 3
2 Graphical and functional skin customizations implemented for Ferrari .........
............. 3
2.1
2.2
2.3
Graphical customizations
Functional customization Sharing on Social Networks
Important notes
3
5
7
3 Examples of embed code with custom skin ......................................
............................ 8
3.1
3.2
Graphical player customization for video contents
Sharing on Social Networks of video contents via the THRON player
Copyright THRON S.p.A. All Rights Reserved
Via Dei Contarini, 5/A Piazzola sul Brenta (PD), Italia P.IVA 03586990289
8
9
www.thron.com
Pagina 2 di 12
1
Introduction
The THRON player allows to playback multimedia contents (videos, images, audios,
playlists, pagelets and documents) which
are transcoded and delivered by the THRON platform itself. Such player is implem
ented both in FLASH and HTML5, and
supports the corresponding streaming and progressive download protocols. Further
more, THRON player automatically detects
the user device / browser and load the most suitable playback tools accordingly.
This brief tutorial describes the skin and functional customization implemented
for Ferrari and how to use them via suitable setting
of the embed code parameters. For details on how to use the standard THRON playe
r please read the available guide at the
following link: https://support.thron.com/hc/en-us/articles/203623382-Player; ba
sic concepts and main functionalities reported in
the aforementioned documentation are preparatory for the following content.
The tutorial is organized as follows: Section 2 explains skin customization impl
emented for Ferrari. Section 3 concludes the
tutorial presenting complete examples of embed code that illustrate what explain
ed.
2
Graphical and functional skin customizations implemented for
Ferrari
This section explains how to customize the standard THRON player according to Fe
rrari requirements. These customizations
apply to VIDEO and IMAGE PLAYLIST only. In the following, the basic concepts and
main functionalities of the standard THRON
player are taken for granted.
2.1 Graphical customizations
2.1.1
Use case: VIDEO
Referring to https://support.thron.com/hc/it/articles/203648152-How-to-customize
-your-embed-code, the HTML5 Ferrari custom
skin can replace the default .css adding the following code (to set as parameter
of the params array):
[]
urlSkinHTML5
:
http://ferrari4me.weebo.it/static/playerIntegration/4x/css/FerrariPlayerIntegrati
on.css />
[]
Where the value of urlSkinHTML5 is a link to a .css file that implements the Fer
rari custom skin.
Similarly, to customize the Flash skin we just need to replace the default .swf
with the custom one adding the following code (to
set as parameter of the params array):
[]
urlSkin
:
4me.weebo.it/static/playerIntegration/4x/swf/gtskin.swf ,
[]
http://ferrari-
Where the value of urlSkin is a link to a .swf that implements the Ferrari custo
m skin.
If functional modifications to skin (e.g., volume icon that changes according to
different audio levels) are required, we also need to
load into the web page the necessary JavaScript functions calling the following
libraries:
[]
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Copyright 2015 THRON S.p.A. All Rights Reserved
Headquarters: Via Dei Contarini, 5/A, Piazzola sul Brenta (PD), Italy P.IVA 0358
6990289 www.thron.com
<script
src="http://ferrari4me.weebo.it/static/playerIntegration/4x/js/FerrariPlayerInte
gration.js"></scri
pt>
[]
and enable such additional functionalities by calling the following function:
[]
NV4ME.integrations.ferrari.registerShare("YlKmpr")
[]
Where YlKmpr is the <DIV> tag id within which the player is embed (please, note
that such id not only must be the same used
for the <DIV> tag within which the player is embed, but that it is also must be
used as input parameter of the embedVideo
function called by the embed code).
Section 3.1 reports a complete and working example of an embed code with Ferrari
custom skin for a video content.
2.1.2
Use case: IMAGE PLAYLIST
To enable the Ferraris custom skin for IMAGE PLAYLIST, please follow these steps:
1.
loading the following JavaScript libraries (usually loaded in the <head> section
of the html page):
[]
<script
gration.js"></scri
pt>
[]
2.
set the params array as follows:
var params=
{
overrideSkinHTML5: http://ferrari4me.weebo.it/static/playerIntegration/4x/css/Fe
rrariPlayerIntegration.css ,
displayLinked: "none",
displayDownload: "none",
noSkin: true
};
NOTE: parameters displayLinked and displayDownload must be set to "none" to have
the right UX.
3. enable the custom skin on the player using the following command line:
[]
NV4ME.integrations.ferrari.registerShare("YlKmpr)
[]
Where YlKmpr is the <DIV> tag id within which the player is embed (please, note
that such id not only must be the same used
for the <DIV> tag within which the player is embed, but that it is also must be
used as input parameter of the embedVideo
function called by the embed code);
To enable the display of captions for each image (i.e., the values inserted in t
he Description field in THRON for each image of
the playlist) the above code must be replaced with the following:
Pages 4 di 12
[]
NV4ME.integrations.ferrari.registerShare("YlKmpr, , true)
[]
In addition, it is possible to override the default caption font by means of the
following code (reported in the case of the
Courier font):
#YlKmpr .THRON-playlist-info-description .THRON-playlist-description-text
{
font-family:Courier;
}
Furthermore, the optional parameter userLanguage allows one to select the langua
ge for the text to display in the caption. Such
parameter must be specified in the params array, as it follows:
var params={
[]
userLanguage :"EN",
[]
};
Such command enables the skin to visualize the description (coming from the play
er) according to the specified locale. If the
selected locale does not exist or is not configured in the platform, the default
fall-back mechanism implemented in the player will
bring to display the first available locale among those exiting.
Section 3.2 reports a complete and working example of embed code with Ferrari cu
stom skin for an image playlist.
WARNING. Please, note that the use of the Ferrari custom skin described in this
section is intended for video and image playlist
contents only: if audios, images, pagelets or documents must be shown the THRON
player must be used with its default skin.
2.2 Functional customization Sharing on Social Networks
2.2.1
Use case: VIDEO
The THRON player allows developers to add custom buttons (possibly to link to co
rresponding actions, namely, call-back
functions to run when clicked) in the player control bar.
The Social Network Sharing functionality is implemented using such players featur
e. To enable such the sharing functionality, in
addition to what explained in Section Errore. L origine riferimento non stata tr
ovata., we must follow these steps:
1. loading the following JavaScript libraries (usually loaded in the <head> sect
ion of the html page):
[]
<script
gration.js"></scri
pt>
[]
2. adding in the params array the following object:
[]
Pages 5 di 12
skinCustomItems: [
{
id: share ,
action: NV4ME.integrations.ferrari.shareCallback,
icon:
http://ferrari4me.weebo.it/static/playerIntegration/img/share_button.png ,
iconOver:
http://ferrari4me.weebo.it/static/playerIntegration/img/share_button_hover.png
,
iconFlash:
http://ferrari4me.weebo.it/static/playerIntegration/img/share_button.png ,
iconOverFlash
: http://ferrari4me.weebo.it/static/playerIntegration/img/share_button_hover.png
}
]
[]
Where:
id is the identifier of the sharing functionality that we add as custom button t
o the player;
-
action is the function (implemented within the FerrariPlayerIntegration.js scrip
t) which runs when clicking the sharing
-
button;
icon and iconOver, iconFlash amd iconOverFlash are the links to the images that
represent the additional
buttons on the control bar (displayed by default or during mouse roll-over, for
HTML5 and Flash, respectively).
3. enabling the sharing functionality (and link it with the URL to share) with t
he following code line:
[]
NV4ME.integrations.ferrari.registerShare("YlKmpr","http://video.ferrari.com/" )
[]
Where:
YlKmpr is the <DIV> tag id within which the player is embed (please, note that s
uch id not only must be the same
used for the <DIV> tag within which the player is embed, but that it is also mus
t be used as input parameter of the
embedVideo function called by the embed code);
whilst, http://video.ferrari.com/ is the URL chosen for the sake of this example
(and that can be replaced
with the actual one that we want to shared).
Section 0 reports a complete and working example of embed code with the sharing
functionality enabled for a video content.
2.2.2
Use case: IMAGE PLAYLIST
To enable the Ferraris custom skin for IMAGE PLAYLIST, please follow these steps:
1.
loading the following JavaScript libraries (usually loaded in the <head> section
of the html page):
[]
<script
gration.js"></scri
pt>
[]
2.
set the params array as follows:
Pages 6 di 12
var params=
{
rrariPlayerIntegration.css ,
noSkin: true
};
NOTE: parameters displayLinked and displayDownload must be set to "none" to have
the right UX.
3. enabling the sharing functionality (and link it with the URL to share) with t
he following code line:
[]
NV4ME.integrations.ferrari.registerShare("YlKmpr","http://video.ferrari.com/" )
[]
Where:
YlKmpr is the <DIV> tag id within which the player is embed (please, note that s
uch id not only must be the same
used for the <DIV> tag within which the player is embed, but that it is also mus
t be used as input parameter of the
embedVideo function called by the embed code);
whilst, http://video.ferrari.com/ is the URL chosen for the sake of this example
(and that can be replaced
with the actual one that we want to shared).
To enable the display of captions for each image (i.e., the values inserted in t
he Description field in THRON for each image of
the playlist) the above code must be replaced with the following:
[]
NV4ME.integrations.ferrari.registerShare("YlKmpr,
true)
[]
http://video.ferrari.com/,
In addition, it is possible to override the default caption font by means of the
following code (reported in the case of the
Courier font):
#YlKmpr .THRON-playlist-info-description .THRON-playlist-description-text
{
font-family:Courier;
}
Section 3.4 reports a complete and working example of embed code with the sharin
g functionality enabled for an image playlist
content.
WARNING. Please, note that the use of the Ferrari custom skin described in this
section is intended for video and image playlist
contents only: if audios, images, pagelets or documents must be shown the THRON
player must be used with its default skin.
2.3 Important notes
- if more than on embed code is insert within the same page, please make sure th
at each embed code is linked with its own
unique <DIV> tag id by means of the embedVideo function (as explained in Section
2.1, each <DIV> tag id must be passed as
input parameter to an unique embedVideo function call only). For more details, s
ee How to embed more than one player within
the same page;
Pages 7 di 12
- please, make sure that the THRON clientId of the customer (ferrari) is correct
ly called in both the pieces of code illustrate at
points 1 and 4 of Section 2.1.
- Ferrari custom skin handles the following minimum heigth: 300 px
- Ferrari custom skin handles the following breakpoints for windows adaptation i
n width: 314px; 444px; 598px; 726px
- the layout of the sharing page changes below 400 px, both in width and heigth:
in this case, only icons of the various social
networks are displayed
- As explained in this article: How to embed THRON player into a web page, the m
inimum required size for the standard THRON
player is, in any case, 160 px in width (640 px if you want to show attachments)
- below 400 px in width with FLASH some
browser may block the player loading.
3
Examples of embed code with custom skin
This section presents examples of embed code with the aforementioned customizati
ons. In these examples, the THRON player is
set so that it can leverage on the HTML5 technology only (i.e., parameter forceH
TML5 set to true): this logic is the common
one request by Ferrari; alternatively, also the logic that primary selects the F
LASH technology (if supported by the end-user
device and however without asking for any additional installation if the FLASH p
lug-in is not present) is request by Ferrari quite
often (i.e., parameter forceHTML5 set to false and parameter experienceFirst set
to true).
3.1 Graphical player customization for video contents
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="THRON S.p.A." />
<script src="http://ferrari4me.weebo.it/static/playerIntegration/4x/js/FerrariPl
ayerIntegration.js"></script>
<title>Custom Player 4.x</</title>
</head>
<body style="overflow:scroll;">
<script type="text/javascript" src="//ferrari-4me.weebo.it/static/player/4x/scri
pts/embedscriptmin.js"></script>
<div id="YlKmpr" style="width:100%; height:100%"></div>
<script>//<![CDATA[
var params={volume :100,
autoPlay :false,
hideFSButton :false,
experienceFirst: false,
forceHTML5: true,
highlightColor: "#eb2323",
urlSkin : http://ferrari-4me.weebo.it/static/playerIntegration/4x/swf/gtskin.sw
f ,
urlSkinHTML5: http://ferrari-4me.weebo.it/static/playerIntegration/4x/css/Ferrar
iPlayerIntegration.css ,
wmode: opaque ,
bufferTime :1,
noSkin: false
};
Pages 8 di 12
embedVideo(( https: === document.location.protocol ? https: : http: ) + "//f
errariview.4me.it/api/xcontents/resources/delivery/getContentDetail?clientId=fer
rari&xcontentId=a7a59255-d3644d30-b506-d3d387bf3e24&pkey=dENnuU ","YlKmpr",param
s, ["UA-23603234-4"]);
//]]>
NV4ME.integrations.ferrari.registerShare("YlKmpr");
// The following code allows player to be responsive when width and height are s
et to 100%
$(window).resize(function() {
$( "body" ).width($(window).width());
$( "body" ).height($(window).height());
});
$(window).resize();
</script>
</body>
</html>
3.2 Graphical player customization for image playlist contents
<!DOCTYPE html >
<head>
ayerIntegration.js?v=2321"></script>
<script type="text/javascript" src="http://ferrari4me.weebo.it/static/player/4x/
scripts/embedscript-min.js"></script>
<title>THRON Player Playlist with Custom Sharing</title>
</head>
<div id="YlKmpra23" style="width:100%; height:480px"></div>
<script>
var params={
rrariPlayerIntegration.css?v=231 ,
noSkin: true
};
rari&xcontentId=ae0
6d09b-8e65-43e0-9cd1-23ceaf5a602f&pkey=K1HY3B","YlKmpra23",params, ["",""]);
//]]>
NV4ME.integrations.ferrari.registerShare("YlKmpra23");
// To display captions: NV4ME.integrations.ferrari.registerShare("YlKmpra23","",
true);
et to 100% as
in this case
Pages 9 di 12
});
$(window).resize();
</script>
</body>
</html>
3.3 Sharing on Social Networks of video contents via the THRON player
<!DOCTYPE html >
<head>
ayerIntegration.js"></script>
<title>THRON Player with Custom Sharing</title>
</head>
<script type="text/javascript" src="//ferrari-4me.weebo.it/static/player/4x/scri
pts/embedscriptmin.js"></script>
<div id="YlKmpr" style="width:100%; height:100%"></div>
<script>//<![CDATA[
var params={volume :100,
autoPlay :false,
hideFSButton :false,
experienceFirst: false,
forceHTML5: true,
highlightColor: "#eb2323",
urlSkin : http://ferrari-4me.weebo.it/static/playerIntegration/4x/swf/gtskin.sw
f ,
urlSkinHTML5: http://ferrari-4me.weebo.it/static/playerIntegration/4x/css/Ferrar
iPlayerIntegration.css ,
wmode: opaque ,
bufferTime :1,
noSkin: false,
skinCustomItems: [
{
id: share ,
action: NV4ME.integrations.ferrari.shareCallback,
icon: http://ferrari-4me.weebo.it/static/playerIntegration/img/share_button.png
,
iconOver: http://ferrari-4me.weebo.it/static/playerIntegration/img/share_button
_hover.png ,
iconFlash: http://ferrari-4me.weebo.it/static/playerIntegration/img/share_button
.png ,
iconOverFlash : http://ferrari-4me.weebo.it/static/playerIntegration/img/share_b
utton_hover.png
}
]
};
Pages 10 di 12
rari&xcontentId=a7a59255-d3644d30-b506-d3d387bf3e24&pkey=dENnuU","YlKmpr",params
, ["UA-23603234-4"]);
//]]>
NV4ME.integrations.ferrari.registerShare("YlKmpr","http://video.ferrari.com");
et to 100%
});
$(window).resize();
</script>
</body>
</html>
3.4 Sharing on Social Networks of image playlists via the THRON player
<!DOCTYPE html >
<head>
ayerIntegration.js?v=2321"></script>
<script type="text/javascript" src="http://ferrari4me.weebo.it/static/player/4x/
scripts/embedscript-min.js"></script>
<title>THRON Player Playlist with Custom Sharing</title>
</head>
<div id="YlKmpra23" style="width:100%; height:480px"></div>
<script>
var params={
rrariPlayerIntegration.css?v=231 ,
noSkin: true
};
rari&xcontentId=ae0
6d09b-8e65-43e0-9cd1-23ceaf5a602f&pkey=K1HY3B","YlKmpra23",params, ["",""]);
//]]>
NV4ME.integrations.ferrari.registerShare("YlKmpra23","http://video.ferrari.com")
;
// To display captions: NV4ME.integrations.ferrari.registerShare("YlKmpra23","
http://video.ferrari.com ",true);
Pages 11 di 12
et to 100% as
in this case
});
$(window).resize();
</script>
</body>
</html>
Pages 12 di 12

Tutorial Uso Player THRON Ferrari Custom Skin en 4

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutorial Uso Player THRON Ferrari Custom Skin en 4

Încărcat de

Drepturi de autor:

Formate disponibile

Fall

S-ar putea să vă placă și