Using our video player from the server-side

Article author
Matt Hanan
  • Updated

This document describes how to implement and use our video player from the server-side (no API calls to load/instantiate the player). This document will also review the data feed required to be ingested and stored within your commerce platform for utilization where you wish video players to be implemented.

Step 1: Data feed

Let’s start with getting your data feed in place. Creatable has a scheduled job called “Content with Products (XML/JSON)”. Your client success account manager can assist in setting up the scheduled job to run on a daily basis. This places a static asset into the following location:{{client_id}}/content_with_products.{{extension:xml|json}}


Once this feed has been set up and the job has run, this file can be used to ingest the relevant video asset data into your commerce platform for use. Note that the format of this file is “By Asset” meaning, there is a representation of an asset, this object contains an asset_data object and a matched products object. For each matched product, you need to store the asset_data. More than one asset may be matched to a product, so if you can imagine a single product in the commerce platform, it could contain multiple asset_data objects describing the videos that have been associated with it. You can use this to fuel any experience your UX/UI team can envision.


Step 2: Implementing the video player

Implementing the video player is fairly simple and requires access to the asset_data objects within the server-rendered page context that we set up and ingested in Step 1.


The following JS Fiddle is an example of the the video player implementation:


This fiddle addresses several items:


  1. Loading of the 2 required libraries (analytics and the player).
  2. Asset data access
  3. Player implementation with example options


Protip: During the implementation, you can preload the 2 required libraries to remove any loading delays. Depending on how your frontend stack is built this can be achieved by using a <link> tag, like this:


<link rel="preload" as="script" href=""><!-- analytics -->

<link rel="preload" as="script" href=""><!-- player -->


Using the JS Fiddle example, the following operations are performed:


  1. Initializing the analytics library
  2. Customization of the UI elements
  3. Binding events (can be used to fire analytics data to Adobe Analytics or Google Analytics (for example)
  4. Setting the player options.
  5. Initializing the player.


That’s it, you should now have a working server-side player implementation.


Step 3 (optional): Adding 3rd Party Analytics Event Tracking

Once you have implemented the player from the server-side, you can track engagement events directly into your 3rd party analytics dashboard (Google Analytics, Adobe Analytics, CoreMetrics, etc…). This is done by listening to events that are emitted by the player and executing your customized tracking events.


You’ll notice from the fiddle above a function named onStateChange()this function can be used to capture events and send them to any 3rd party analytics system.


A simple event handler would look like this:

// State change is emitted by the player

var onStateChange = function(event_type, data){

  // When state change is fired, delegate the information to the external analytics handler

 sendToExternalAnalytics(event_type, data, staticVideo);


// Basic function that can be used to map Creatable data to an external analytics system

var sendToExternalAnalytics = function(event_type, data, staticVideo) {

  if (event_type === “tvp:media:videoplaying”) {

   // Map event data to external analytics system and fire event

    // Example values contained in the video data object:

    // staticVideo.title = the video’s title

    // = the video’s unique ID



This pattern can be followed for all Creatable events to generate custom reports in the 3rd party analytics system.


The following events are emitted by the player and can be listened for:


tvp:media:cued - video is ready to be played

tvp:media:videobuffering - video is loading

tvp:media:videoplaying  - video is playing

tvp:media:videopaused - video is paused

tvp:media:videoended - the video has played to the end

tvp:video:view - video view event is registered

tvp:video:viewtime - an incremental heartbeat used for calculation of playback time

tvp:video:view:25p - the player has played past the 25% point in the video

tvp:video:view:50p - the player has played past the 50% point in the video

tvp:video:view:75p - the player has played past the 75% point in the video

tvp:video:view:100p - the player has played past the 100% point in the video


Please contact with any questions regarding implementation of the player, sometimes specific questions are just too specific to capture in documentation, but we’re happy to help.