Articles in this section

See more

JW Player

Avatar
Tony Gentile
  • Updated
Follow

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your JW Player video player:

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

You will see this message:

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>

Activate Data Collection for a JW Player

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>

References:

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

Related articles

Comments

0 comments

Article is closed for comments.