Contents x
    Use the JavaScript API
    • 18 Jan 2024
    • Print
    Contents

    Use the JavaScript API

    • Updated on 18 Jan 2024
    • Print
    Article summary

    JavaScript API

    The JavaScript API is accessed by initializing a VideoPlayer.Collection object. There are two functions to do this, both taking the ID of the HTML element containing your Player as an argument:

    • To add the Player dynamically:

      VideoPlayer.Collection.addPlayerById("player_container");

    • To access an existing Player:

      var player = VideoPlayer.Collection.getPlayerById("player_container");

    Note: You must wait for the Player to load before you can connect to it. If lazy loading is enabled, the Player will not load until a user clicks play.

    Remove a Player

    You can also remove a Player dynamically with the VideoPlayer.Collection object by calling this function:

    VideoPlayer.Collection.removePlayerById("player_container");

    Enable or disable analytics

    To enable or disable analytics, use the following functions:

    • Enable analytics:

      VideoPlayer.Collection.acceptAnalytics();

    • Disable analytics:

      VideoPlayer.Collection.rejectAnalytics();

    HTML example

    A consent banner can look like this in HTML:

    HTML

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Your website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="main.js"></script>
  </head>
 
  <body>
    <!-- Embedded video -->
    <div
      mi24-video-player
      video-id="<VideoID>"
      player-id="<PlayerID>"
      channel-id="6"
      config-type="vmpro"
      flash-path="//e.video-cdn.net/v2/"
      api-url="//d.video-cdn.net/play"
    ></div>
    <script src="//e.video-cdn.net/v2/embed.js"></script>
 
    <!-- Consent Banner-->
    <div class="consent-banner">
        <button id="accept-button">Accept</button>
        <button id="reject-button">Reject</button>
    </div>
  </body>
</html>

    Script example

    The following example shows you how to enable or disable analytics in the script:

    JavaScript

    // main.js
document.getElementById("accept-button").addEventListener("click", function () {
    VideoPlayer.Collection.acceptAnalytics();
});
document.getElementById("reject-button").addEventListener("click", function () {
    VideoPlayer.Collection.rejectAnalytics();
});

    iframe example

    If the video player is within an iframe, the parent domain calls the postMessage() API to set consent.

    If your video is embedded within an iframe, your HTML code would look like this:

    HTML

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Your website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="main.js"></script>
  </head>
 
  <body>
    <!-- Embedded video -->
    <iframe
      id="player_iframe"
      width="800"
      height="450"
      src="<SOURCE_URL>"
      allowfullscreen
      frameborder="0"
    ></iframe>
 
    <!-- Consent Banner-->
    <div class="consent-banner">
      <button id="accept-button">Accept</button>
      <button id="reject-button">Reject</button>
    </div>
  </body>
</html>

    In turn, the script for an embedded video within an iframe could look like this:

    JavaScript

    // main.js
document.getElementById('accept-button').addEventListener('click', function(){
  var iframeWindow = document.getElementById("player_iframe").contentWindow;
  iframeWindow.postMessage('CONSENT_GIVEN', '*');
});
document.getElementById('reject-button').addEventListener('click', function(){
  var iframeWindow = document.getElementById("player_iframe").contentWindow;
  iframeWindow.postMessage('CONSENT_DECLINED', '*');
});

    Note: If multiple videos are embedded into the page with iframe codes, you will need to send the CONSENT_GIVEN post message to all the relevant iframes in the current page. The same is valid for giving and declining consent with the Consent Dialog, all the dialogs will need to be Accepted / Declined individually.

    Was this article helpful?
    What's Next