Download Handbuch

 

 

Sie können auch Ihre eigene Lösung implementieren, wie z.B. einen benutzerdefinierten Zustimmungsbanner als Alternative zum von uns bereitgestellten Zustimmungsdialog (siehe die Dokumentation hier).

In diesen Fällen können Sie die JavaScript-API verwenden, um dem Player mitzuteilen, Analytics zu akzeptieren oder abzulehnen

Beachten Sie, dass die folgenden Schritte die Anzeige eines benutzerdefinierten Zustimmungsbanners oder Elements erfordern.

HTML-Beispiel

Ein Zustimmungsbanner kann in HTML folgendermaßen aussehen:


<!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>

Der Benutzer sieht auf Ihrer Website ein solches Zustimmungsbanner:


Funktionen

Um Analytics zu aktivieren oder zu deaktivieren, fügen Sie dem Skript die folgenden Funktionen hinzu (weitere Funktionen sind hier verfügbar):

  • Analytics aktivieren
VideoPlayer.Collection.acceptAnalytics()
  • Deaktiviere Analytics
VideoPlayer.Collection.rejectAnalytics()

Das folgende Beispiel zeigt, wie man Analytics im Skript aktivieren oder deaktivieren kann.

Beachte, dass die "Annehmen" und "Ablehnen" Buttons mit den Funktionen verbunden sind.


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

iframe-Beispiel

Wenn sich der Videoplayer in einem Iframe befindet, ruft die übergeordnete Domäne die postMessage-API auf, um die Zustimmung festzulegen.

Wenn Ihr Video in einen iframe eingebettet ist, würde Ihr HTML-Code wie folgt aussehen:

<!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>

Das Skript für ein eingebettetes Video in einem iframe wiederum könnte wie folgt aussehen:

// main.js
// We wait until the content of the page was loaded
document.addEventListener("DOMContentLoaded", function () {
    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', '*');
    });
});