Inhalt x
    Verwendung der JavaScript API
    • 28 Apr 2025
    • Drucken
    Inhalt

    Verwendung der JavaScript API

    • Aktualisiert am 28 Apr 2025
    • Drucken
    Artikel-Zusammenfassung

    JavaScript API

    Der Zugriff auf die JavaScript-API erfolgt durch Initialisierung eines VideoPlayer.Collection-Objekts. Hierfür gibt es zwei Funktionen, die beide die ID des HTML-Elements, das den Player enthält, als Argument verwenden:

    • Um den Player dynamisch hinzuzufügen:

    • VideoPlayer.Collection.addPlayerById("player_container");

    • Um auf einen vorhandenen Player zu zugreifen:

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

    Hinweis: Sie müssen warten, bis der Player geladen ist, bevor Sie eine Verbindung zu ihm herstellen können. Wenn „Lazy Loading“ aktiviert ist, wird der Player erst geladen, wenn ein Benutzer auf „Play“ klickt.

    Einen Player entfernen

    Sie können einen Player dynamisch mit dem VideoPlayer.Collection Objkt entfernen indem Sie diese Funktion aufrufen:

    VideoPlayer.Collection.removePlayerById("player_container");

    Analyse aktivieren/deaktivieren

    Verwenden Sie zum Aktivieren oder Deaktivieren von Analysen die folgenden Funktionen:

    • Analyse aktivieren

      VideoPlayer.Collection.acceptAnalytics();

    • Analyse deaktivieren

      VideoPlayer.Collection.rejectAnalytics();

    HTML Beispiel

    Ein Einwilligungsbanner kann in HTML wie folgt aussehen:

    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 Beispiel

    Das folgende Beispiel zeigt Ihnen, wie Sie die Analyse im Skript aktivieren oder deaktivieren können:

    JavaScript

    // 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 innerhalb eines 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:

    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>

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

    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', '*');
});

    Hinweis: Wenn mehrere Videos mit iframe-Codes in die Seite eingebettet sind, müssen Sie die Post-Message CONSENT_GIVEN an alle relevanten iframes auf der aktuellen Seite senden. Das Gleiche gilt für die Erteilung und Verweigerung der Zustimmung mit dem Zustimmungsdialog, alle Dialoge müssen einzeln angenommen/abgelehnt werden.

    War dieser Artikel hilfreich?
    What's Next