Articles in this section

See more

JW Player

Avatar
Tony Gentile
  • Updated
Follow

Datazoom is a high-availability real-time data collection solution. This document summarizes how to integrate your JW Player with the Datazoom platform.

Login to Datazoom here:  https://app.datazoom.io

Add a Collector as indicated here:  How to add a Collector

Copy the CONFIG ID to be used in the subsequent steps

Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. Integrate the JW Player plugin into your web application with the following snippet:

<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>

  • Insert this line into your HTML

  • Replace the CONFIG_ID value with Collector configuration id.

This inserts Datazoom's data collection SDK into the page.

Insert your JW Player license into the page. Every customer will have their own license for JW player.

<script src="http://jwpsrv.com/library/<your_licensed_player.js>"></script>

Option 1: Activate Data Collection for an Existing JW Player Instance

This is the standard option for customers who only need to collect data from the video player and are not concerned with joining player events with CDN logs or sending CMCD data to a CDN.

To activate data collection for a JW Player instance, create a Datazoom context which references the player instance with the following snippet:

datazoom_context = datazoom.createContext(jw_player);

For example:

<html>

<head>
    <!-- THE JW PLAYER LICENSE SCRIPT -->
    <script src='https://content.jwplatform.com/libraries/JW_LICENSE.js'></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>
    <!-- THE VIDEO PLAYER -->
    <div class="vid-container">
      <div id="jw-player">
      </div>
    </div>
    <script>
      var jw_player;
      var datazoom_context;
      var config = {
        file: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        image: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Big_Buck_Bunny_thumbnail_vlc.png/320px-Big_Buck_Bunny_thumbnail_vlc.png",
        title: "BigBuckBunny-mp4® Product Video",
        height: 360,
        width: 640
      };
      // Create a Player instance
      jw_player = jwplayer("jw-player").setup(config);
      // Activates data collection
      datazoom_context = datazoom.createContext(jw_player);
    </script>
</body>

</html>

Option 2: Have Datazoom Create a JW Player with Data Collection Activated

This option is necessary if you are joining Player & CDN Log data together or want to send CMCD data to a CDN. In this option, Datazoom will handle instantiation of the player with the necessary hooks required to insert parameters like Content Session ID & Request ID in every media request the player makes.

A JW Player instance can be created with Datazoom data collection activated, using the following snippet:

datazoom.createContextAndPlayer(container, config).then(
    function(context) {
        jw_player = context.getPlayer();
        datazoom_context = context;
    }
);

By creating a player instance through the datazoom.createContextAndPlayer() method, it enables Datazoom to collect more player information to assist QoE monitoring and distributed tracing.

For example:

<html>

<head>
    <!-- THE JW PLAYER LICENSE SCRIPT -->
    <script src='https://content.jwplatform.com/libraries/JW_LICENSE.js'></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>
    <!-- THE VIDEO PLAYER -->
    <div class="vid-container">
      <div id="jw-player">
      </div>
    </div>
    <script>
      var jw_player;
      var datazoom_context;
      var config = {
        file: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        image: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Big_Buck_Bunny_thumbnail_vlc.png/320px-Big_Buck_Bunny_thumbnail_vlc.png",
        title: "BigBuckBunny-mp4® Product Video",
        height: 360,
        width: 640
      };
      // Activate data collection and create a player instance
      datazoom.createContextAndPlayer("jw-player", config).then(
        function(context) {
          jw_player = context.getPlayer();
          datazoom_context = context;
        }
      );
    </script>
</body>

</html>

JW player supports various alternative formats to configure the media contents for playback, the following are common examples supported by the Datazoom collector.

Without using playlist:

var config = {
  file: "https://demo.datazoomlabs.com/vod/example.m3u8",
  title: "Football Video",
  description: "JW Player Test",
  mediaid: "My Content ID",
  width: 640,
  height: 360,
  autostart: "false"
};

With playlist:

var config = {
  playlist: [{
    file: "https://demo.datazoomlabs.com/vod/example.m3u8",
    title: "Football Video",
    description: "JW Player Test",
    mediaid: "My Content ID"
  }],
  width: 640,
  height: 360,
  autostart: "false"
};

With playlist and playlist sources:

var config = {
  playlist: [{
    title: "Football Video",
    description: "JW Player Test",
    mediaid: "My Content ID",
    sources: [{
      file: "https://demo.datazoomlabs.com/vod/example.m3u8"
    }]
  }],
  width: 640,
  height: 360,
  autostart: "false"
};

Stop Data Collection

If the data collection must be stopped for any reason, for example after the destruction of the corresponding player instance, invoke the destroy() method of the Datazoom context object as in the following example:

if (jw_player) {
    jw_player.remove();
    jw_player = null;
}

if (datazoom_context) {
    datazoom_context.destroy();
    datazoom_context = null;
}

References:

JWPlayer API Doc: https://developer.jwplayer.com/jw-player/docs/javascript-api-reference/

Related articles

Comments

0 comments

Article is closed for comments.