Quickstart - embed Player Layer

Get Player Layer setup on your player in 5 minutes!

The Player Layer SDK for JavaScript provides a rich set of functionality that enables you to use the power of the Monterosa / Interaction Cloud to make your video player interactive and shoppable. To learn more about Player Layer read Core Concepts.

This guide will show you how to inject the Player Layer SDK into your webpage and connect it with your video player.

The Player Layer SDK is currently in pre-release and is constantly evolving without notice. It is currently supported within most modern web browsers. Native support is coming soon.

Get Set up on Monterosa / Interaction Cloud

Before you begin, you will need a login to the Interaction Cloud, and your relationship manager will need to associate your account with a staging project. They will also provide you with a Client Key

Basic Setup

The Player Layer SDK contains the core functionality and is included alongside a player adapter script, specific to your player. The adapter connects Player Layer to your video player to ensure a tight coupling and understanding.

For most video players, this will be one of a standard set of adapters made available and bundled with Player Layer.

Currently in pre-release, please talk to your relationship manager for the availability of adapters. See Supported Platforms for current availability.

To embed Player Layer onto your webpage you only need 2 lines of code! The first injects the core Player Layer library and the second includes all of its CSS styles.

<script src="//apps.monterosa.cloud/pl/1.24.3/web/main.js"></script>
<link rel="stylesheet" href="//apps.monterosa.cloud/pl/1.24.3/web/styles.css">

Once added, create an instance of Player Layer and specify the following parameters:

const pl = new PlayerLayer({
  clientKey: <String>,
  playerAdapter: <PlayerLayerAdapter> or <defaultAdapterString>,
  playerContainer: <HTMLElement>,
  playerInstance: <Object>,
  contentId: <String> // optional
  eventId: <String> // optional
  authData: <Object> // optional 
});

//initialise Player Layer
pl.init();

<link rel="stylesheet" href="https://apps.monterosa.cloud/pl/1.24.3/web/styles.css" />
<script src="https://apps.monterosa.cloud/pl/1.24.3web/main.js"></script>

<div class="container">
  <video id="video-player"></video>
  <div id="player-layer"></div>
</div>

<script type="text/javascript">
  const videoPlayer = new Player('video-player', {...});

  const pl = new PlayerLayer({
    clientKey: 'CLIENT_KEY',
    playerAdapter: "ADAPTER",
    playerContainer: document.getElementById('player-layer'),
    playerInstance: videoPlayer
  });
  
  pl.init();
  
</script>

<head>
  <link rel="stylesheet" href="https://apps.monterosa.cloud/pl/1.24.3/web/styles.css" />
  <script src="https://apps.monterosa.cloud/pl/1.24.3web/main.js"></script>
  
  <style>
    html, body, .container, #video-player {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .container {
      position: relative;
    }
  </style>  
</head>

<body>
  <div class="container">
    <video-js
      id="video-player"
      data-account="ACCOUNT_ID"
      data-player="PLAYER_ID"
      data-video-id="VIDEO_ID"
      data-embed="default"
      controls=""
      data-application-id=""
      class="vjs-fluid"
    ></video-js>
    <div id="player-layer"></div>
  </div>

  <script src="https://players.brightcove.net/ACCOUNT_ID/PLAYER_ID_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('video-player').ready(() => {
      const pl = new PlayerLayer({
        clientKey: 'CLIENT_KEY',
        playerAdapter: 'brightcove',
        playerContainer: document.getElementById('player-layer'),
        playerInstance: videojs.getPlayer('video-player'),
      });

      pl.init();
    });
  </script>
</body>

<head>
  <link rel="stylesheet" href="https://apps.monterosa.cloud/pl/1.24.3/web/styles.css" />
  <script src="https://apps.monterosa.cloud/pl/1.24.3web/main.js"></script>
  <script src="https://www.youtube.com/iframe_api" async></script>

  <style>
    html, body, .container, #video-player {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .container {
      position: relative;
    }
  </style>  
</head>
  
<body>
  <div class="container">
    <div id="video-player"></div>
    <div id="player-layer"></div>
  </div>

  <script type="text/javascript">
    let youtubePlayer, pl;

    window.onYouTubeIframeAPIReady = () => {
      youtubePlayer = new window.YT.Player('video-player', {
        playerVars: {
          playsinline: 1,
          fs: 0,
          rel: 0,
        },
        width: '100%',
        height: '100%',
        videoId: 'YOUTUBE_VIDEO_ID',
        events: {
          onReady: onPlayerReady,
        },
      });
    };

    onPlayerReady = () => {
      pl = new PlayerLayer({
        clientKey: 'CLIENT_KEY',
        playerAdapter: 'youtube',
        playerContainer: document.getElementById('player-layer'),
        playerInstance: youtubePlayer,
      });

      pl.init();
    };
  </script>
</body>

clientKey: Provided to you by your relationship manager. If you don't have a key from us you can contact us here.

This is what authorises your Player Layer instance and manages the connection to our Interaction Cloud.

playerAdapter: Either the name of one of the adaptors we provide or a custom adaptor that is tailored specifically for your player.

We provide a few adapters out of the box for you to use (details here) but if we have not provided an adapter you can use this parameter to pass in your own. Details on how to create one are here.

playerContainer: The HTML element with the dimensions and position of the player, to which Player Layer will be attached as a child.

This controls where exactly on your site that Player Layer will be positioned and sized.

playerInstance: The object name of your video player instance. Used for communicating with your player through the adapters.

contentId (the videoId string related to your video for your player) or eventId (the id of real event on the studio)

To connect Player Layer to a specific event within your Studio project you can either pass the specific ID of that event using the eventId parameter or for a more seamless setup process pass in your contentId for each video. This ID can be your unique video reference that you may already have set up. This ID can then be added into the 'event settings' tab within Studio to link events to videos.

authData can include next properties :

authorization - (Boolean) toggled on/off authorization using Monterosa ID.
strategy - (String) auth strategy can be email, phone
provider - (String) auth provider can be google, facebook, apple, aws, lwa
accessToken - (String) token

This is an optional parameter that will authenticate users using our ID solution, if you would link to discuss using our authentication system please reach out to your relationship manager or contact us here.

Once you have an instance of Player Layer ready run pl.init();

Thats it! Player Layer will now add interactivity onto your videos. Player Layer will connect to the Interaction Cloud, recognise events and allow you to place and control Layers in real time.

Adapters & Advertising

To enable a tight synergy between your player and Player Layer and other advanced features such as advertising, see the Adapter Setup guide.

Next steps

pageAdapter Setup and references

PreviousSupported Platforms NextAdapter Setup and references

Last updated 1 year ago