Content Experience

Introduction

THRON Content Experience is made up of three elements:

  • THRON Player: the actual element which handles content playback
  • Template Editor: the tool for creating and updating player’s layouts (both graphic customization and behavior)
  • Deployment tool: the tool for managing existing embed codes and updating them centrally to newer versions of the templates.

 

THRON Player

THRON Player is a multimedia player and document viewer. It provides a built-in tracking library to record any type of user interaction between user and content and offers a deep level of customization both in appearance and in behavior.

 

THRON Player’s architecture is modular. It is made up of three main elements performing specialized tasks: 

  • the "bootstrapper", the element in charge of loading the proper version of the Player;
  • the “core”, which manages the loading of the js and css files to build the Player's customization and all the content-related information such as title, description and content url. At the same time, it handles the loading of the appropriate module for the content’s playback.
  • there is one "module" for each content type: video, video-gallery, audio, audio-gallery, image, image-gallery, document, downloadable.

 

Device support

THRON player is always updated to latest architectures and technologies while ensuring compatibility with the following desktop browsers:

 

Browser

Operating System

Internet Explorer 9 and later

Windows

Firefox 3.5 and later

Windows / MacOSX

Chrome all versions

Windows / MacOSX

Safari 9 and later

MacOSX



 

Since mobile operating systems are updated frequently, we fully test and support only the latest versions on the most popular devices and mobile browsers:

 

Browser

Operating System

Devices

Safari on iPhone

iOS 8+

iPhone 4s through current

Safari on iPad

iOS 8+

iPad 2 through current

Chrome on Android

Android 4.2+

Any running Android 4.0

 

Content types

 

Video

THRON Player delivers dynamic quality to suit the user's bandwidth capabilities and ensure the best possible, uninterrupted experience: adaptive dynamic bitrate via HTTP Streaming technology is available both on live and on-demand videos. According to content resolution, typical available bitrates are:

  • 360px width: 512 kbps
  • 540px width: between 512 and 1200 kbps
  • 720px width: between 256 and 2000 kbps

 

If custom configurations are needed you can contact our technical support.

Dynamic quality for video content is not available on IE prior to 11 or on Windows prior to 10.

Playback quality can also be selected manually by the user directly from the Player’s control bar.

Video content also support localized .srt subtitles files which can be uploaded via Dashboard.

It is possible to set a custom thumbnail to be used as “poster image” which will be shown during the player startup, before the content playback starts.

 

Audio

For audio content playback, THRON Player offers the chance to have a custom thumbnail to be used as poster before and during playback. Additionally, audio stream playback will be accompanied by a waveform generated directly from the source file and therefore representative of the actual stream.

 

Images

THRON Player offers an immersive experience when reproducing image content type: thanks to its powerful transcoding engine, as soon as an image is zoomed, it will automatically and instantly increase the detail level of the visible area to always ensure the best available quality.

 

Pages (HTML)

THRON Player can also handle HTML content. More specifically, it offers in "edit" mode (only in Dashboard) an actual WYSIWYG editor for creating Pages with styled text and images. The HTML content of these pages can be retrieved via API to be used in any context.

For security reasons, scripts or videos may not be used within Pages

 

Documents

Any office document like words, spreadsheets or presentation files are processed by THRON and rendered as a "continuous page flow" document. THRON Player embeds a simple control bar to zoom, search for words, pan and navigate through document content with ease.

 

URL

THRON Player can also handle URLs content type which will be actually displayed as a customizable thumbnail which will perform redirect toward a specific address upon click.

 

Other

Any other content that can’t be reproduced (e.g. archives) will be made available by THRON Player in the form of direct download, triggered upon click on a customizable thumbnail.

 

Player Features

 

Lazy loading

THRON Player loading is intelligent for optimal user experience. When multiple instances are present in the same page, the library that handles the actual loading of THRON Player will in fact give priority to those instances that are in the viewport area, thus optimizing the experience. Other instances will be loaded in the background so that users do not have to face any waiting time.

 

SEO friendly

Embed codes made via THRON Player will automatically provide search engines with all the information needed for a better content indexing (title, thumbnail, description), etc. When it comes to delivering content across the web, SEO optimization can effectively boost your efforts of reaching a target audience. For this reason THRON provides all the facilities to create content that both your audience and search engines will enjoy. All the metadata included in the embed code refer to the schema.org markup, which is also recommended by Google.

 

Tracking

THRON player has a built-in tracking library that has two main features:

  • It is capable of identifying a basic user's interactions with content, such as: "content has been watched", “content has been sought”, “content has been downloaded”, etc.
  • It is capable of collecting information on users accessing your content, identifying them through their devices.

 

This library is based on simple javascript events launched by the player itself. Data collected from these events allow you to determine valuable information such as the number of visualizations for your content and their approval on specific portions of your content rather than on your content as a whole. Moreover, thanks to the information collected on users (type of device used, operating system, country of origin and channel, etc.), combined with Content Intelligence, it is capable of identifying a user’s interests so you can offer content capable of catching the attention of your audience.

The tracking library will assign a unique ID to any device accessing your content and, as soon as users provide their identity (e.g. through a login service), it combines tracking information collected until that moment with the new obtained identity.

 

Advertising

THRON Player provides advertising playback functionality thanks to its integration with IMA SDK Library developed by Google. All the available APIs which can be used in order to leverage advertising can be found here, while a full compatibility list of all supported platforms can be found on this page.

 

Template Editor

The Content Experience Manager provides both a visual editor for creating graphic customizations and an advanced editor for highly custom templates via css and javascript files upload.

[dropdown:CSS sample]


/*
* === START COLORIZATION ===
*/


/* BACKGROUND SCROLLBAR */


/* Track */

.th-skin-skinID.th-player-external-element *::-webkit-scrollbar-track,
.th-skin-skinID.player *::-webkit-scrollbar-track {
    background-color: #383838;
}


/* Handle */

.th-skin-skinID.th-player-external-element *::-webkit-scrollbar-thumb:vertical,
.th-skin-skinID.player *::-webkit-scrollbar-thumb:vertical {
    background-color: #666;
    border-width: 0px;
}

.th-skin-skinID.th-player-external-element *::-webkit-scrollbar-thumb:horizontal,
.th-skin-skinID.player *::-webkit-scrollbar-thumb:horizontal {
    background-color: #666;
    border-width: 0px;
}

.th-skin-skinID.th-player-external-element *::-webkit-scrollbar-thumb:window-inactive,
.th-skin-skinID.player *::-webkit-scrollbar-thumb:window-inactive {
    background-color: #737474;
}


/* BACKGROUND COLORS */


/* Player Background Color */

.th-skin-skinID.th-audio .th-media-bg-color,
.th-skin-skinID.th-video .th-media-bg-color,
.th-skin-skinID.th-image .th-media-bg-color,
.th-skin-skinID.th-liveevent .th-media-bg-color,
.th-skin-skinID.th-videogallery .th-media-bg-color,
.th-skin-skinID.th-imagegallery .th-media-bg-color,
.th-skin-skinID.th-audiogallery .th-media-bg-color {
    background-color: rgba(0, 0, 0, 1);
}

.th-skin-skinID.th-url .th-media-bg-color,
.th-skin-skinID.th-other .th-media-bg-color {
    background-color: rgba(0, 0, 0, 1);
}

.th-skin-skinID.th-pagelet .th-media-bg-color {
    background: #ffffff;
}

.th-skin-skinID.th-other-document .th-media-bg-color {
    background-color: #343434;
}

.th-skin-skinID.th-other-document .th-loading-bar .th-progress {
    background-color: #F39900;
}


/* Control bar Background */

.th-skin-skinID .th-control-bg-color {
    background-color: rgba(0, 0, 0, 0.5);
}


/* Overlay Background. For example share view background */

.th-skin-skinID .th-overlay-bg-color {
    background-color: rgba(0, 0, 0, 0.5);
}


/** TEXT COLOR **/

.th-skin-skinID .th-text-color {
    color: #ffffff;
}

.th-skin-skinID .th-text-color * {
    color: #ffffff;
}


/* Active text. For example, tooltips active items */

.th-skin-skinID .th-text-active-color {
    color: #f39900;
}

.th-skin-skinID .th-text-active-color * {
    color: #f39900;
}


/** BUTTONS COLOR **/


/* Button Color */

.th-skin-skinID .th-button-color {
    fill: #ffffff;
    color: #ffffff;
}

.th-skin-skinID .th-button-color:not(.th-hover-disabled):not(.th-button-disabled):hover {
    fill: #f39900;
}


/* For example, play icon in center of video reproducer */

.th-skin-skinID .th-clickable-overlay:hover .th-button-color:not(.th-hover-disabled):not(.th-button-disabled) {
    fill: #f39900;
}


/* For example, in mobile hover color play icon in center of video reproducer  */

.th-skin-skinID.th-mobile .th-button-color:hover:not(.th-hover-disabled):not(.th-button-disabled):not(.th-button-color-active) {
    fill: #f39900;
}


/* For example, in mobile hover color play/pause/speed   */

.th-skin-skinID.th-mobile .th-clickable-overlay:hover .th-button-color:not(.th-hover-disabled):not(.th-button-disabled) {
    fill: #f39900;
}


/* Disabled Button Color */

.th-skin-skinID .th-button-disabled {
    fill: #737474;
    color: #737474;
}


/* When tooltips is open, button assumes this color */

.th-skin-skinID .th-button-color-active {
    fill: #f39900;
}


/* SLIDER COLORS */


/* Svg gradient, actually used only for volume */

.th-skin-skinID .th-svg-gradient.th-bg-stop-color {
    stop-color: #f39900;
}

.th-skin-skinID .th-svg-gradient.th-overlay-stop-color {
    stop-color: #ffffff;
}


/* Filled slider background color */

.th-skin-skinID .th-components-bg-color {
    stroke: #f39900;
    background-color: #f39900;
}


/* Empty slider element background color */

.th-skin-skinID .th-slider-bg-color {
    stroke: #ffffff;
    background-color: #ffffff;
}


/* This Css class defines the color of the selected text by the user. Used for example in document player */

.th-skin-skinID .th-selectable-container::-moz-selection {
    background-color: #f39900;
}

.th-skin-skinID .th-selectable-container ::selection {
    background-color: #f39900;
}


/* Highlighted elements, used for example in doc player to highlight text */

.th-skin-skinID .th-highlighted-hover:hover {
    opacity: 0.2;
    background-color: #f39900;
}

.th-skin-skinID .th-highlighted-item {
    background-color: #f39900;
}


/* Error background */

.th-skin-skinID .th-bg-error {
    background-color: #282829;
}


/* bordered element */

.th-skin-skinID .th-item-selected {
    border: 2px solid #f39900;
}


/* external linked bar */

.th-skin-skinID .th-external-linked-carousel .th-linked-carousel .th-button-color {
    fill: rgba(0, 0, 0, 0.5);
}


/*
* === END COLORIZATION ===
*/

[/dropdown]

[dropdown: JS sample]


 //#################################################################################
 //Define CustomPlugin
 //#################################################################################
 /**
  * @description
  * definition Player plugin
  * @param player {Player}
  * @param dom {HTML}
  * @param otherparams {Object}
  * @param jquery {JQuery}
  */
 window.skinIDPlugin = function(playerInstance, dom, otherparams, jquery) {
     //################################################
     //CONFIGURATION
     //################################################
     /**
      * @description
      * Player Instance
      * @type {Player}
      */
     this.player = playerInstance;
     /**
      * @description
      * jQuery Instance
      * @type {jQuery}
      */
     this.$ = jquery;
     //################################################
     // Event CE THRON listener
     //################################################
     /**
      * @description
      * Inizialization plugin, add some embed params
      */
     this.player.on("beforeInit",
         function(playerInstance) {
             console.log("set action before player init", playerInstance, "otherparams", otherparams);
             var params = {
                 volume: 0.5,
                 userLanguage: "undefined",
                 autoplay: false,
                 linkedContent: "show",
                 //loader spinner color
                 preloadColor: "#F39900",
                 //Audio Wave color
                 waveColor: "#ffffff",
                 waveProgressColor: "#f39900"
             };
             //add params
             playerInstance.params(params);
         }
     );
     //################################################
     //listener event player
     //################################################
     /**
      * @description
      * Resize Event
      */
     this.player.on("resize", function(playerInstance) {
         console.log("resize", playerInstance);
     });
     /**
      * @description
      * On reproducer ready
      */
     this.player.on("ready", function(playerInstance) {
         console.log("ready", playerInstance);
     });
 };
 //#################################################################################
 // MAIN PLUGIN
 //#################################################################################
 //Register Plugin :
 THRONContentExperience.plugin("skinID", skinIDPlugin);
 //#################################################################################

[/dropdown]

 

Deployment Tool

Each template created within the Content Experience Manager, both through visual and code editor, can be updated at any time. It will be up to the user to decide whether to simultaneously update all the embed codes that use that template. However, embed code updating can be done at any time via the "Embed Versioning" screen, so you can first test the performance of any version of the template without ever affecting front-end pages.

Was this article helpful?
1 out of 1 found this helpful

Have any question?

Open a ticket
Comments