Inhalt x
    Callback-Events registrieren
    • 28 Apr 2025
    • Drucken
    Inhalt

    Callback-Events registrieren

    • Aktualisiert am 28 Apr 2025
    • Drucken
    Artikel-Zusammenfassung

    JavaScript API - Unterstütze Events

    Sie können Callback-Events für eine Vielzahl von Events registrieren, darunter HTML5-Medienereignisse und Moving Image-spezifische Ereignisse. Dadurch können Sie Aktionen in Ihrem JavaScript-Code auslösen, wenn diese Events eintreten.

    Callback-Events registrieren/Registrierung aufheben

    Um ein Callback-Event zu registrieren, verwenden Sie die Funktion Player.registerEventListener(). Diese Funktion benötigt drei Argumente:

    • eventName: Der Name des Events.

    • callback: Eine Funktion, die aufgerufen wird, wenn das Event ausgelöst wird.

    • priority(optional): Ein ganzzahliger Wert, der die Reihenfolge bestimmt, in der die Callback-Funktionen aufgerufen werden. Höhere Prioritäten werden zuerst aufgerufen.

    Um die Registrierung eines Callback-Events aufzuheben, verwenden Sie die Funktion Player.unregisterEventListener(). Diese Funktion nimmt zwei Argumente entgegen:

    • eventName: Der Name des Events.

    • callback: Die Funktion, deren Registrierung aufgehoben werden soll.

    Unterstütze Events

    Die folgenden Events werden unterstützt:

    • Alle bekannten HTML5-Medienevents (siehe Medienevents: https://www.eventbrite.com/d/pa--media/events/ für eine Liste).

    • movingimage-spezifische Events:

      • chapterclicked: Wird ausgelöst, wenn der Benutzer auf ein Kapitel klickt.

      • lightadstarted: Wird ausgelöst, wenn die Wiedergabe einer Schaltung beginnt.

    HTML

    <div id="player_container"></div>
<div id="while_playing" style="display:none">video is playing!</div>

    JavaScript

    function playingCallback(event) {
  var whilePlaying = document.getElementById('while_playing');
  whilePlaying.style.display = "block";
}

function pauseCallback(event) {
  var whilePlaying = document.getElementById('while_playing');
  whilePlaying.style.display = "none";
}

// Create a new player instance.
function createPlayer() {
  var initPlayer = {
    success: function(playerApi) {
      playerApi.registerEventListener('playing', playingCallback);
      playerApi.registerEventListener('pause', pauseCallback);
    },
    parameters: {
      configType: 'vmpro',
      playerId: '<PlayerID>',
      videoId: '<VideoID>',
      apiUrl: '//d.video-cdn.net/play',
      flashPath: '//e.video-cdn.net/v2/'
    }
  };

  VideoPlayer.Collection.addPlayerById('player_container', initPlayer);
}

// Add the player.
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//e.video-cdn.net/v2/embed.js';
head.appendChild(script);

script.onload = (function() {
  createPlayer();
});

    Wenn das Video abgespielt wird, wird die Funktion playingCallback() aufgerufen und das Element while_playing wird angezeigt. Wenn das Video angehalten wird, wird die pauseCallback()-Funktion aufgerufen und das while_playing-Element wird ausgeblendet.

    Vorschläge zur Optimierung

    • Der obige Beispielcode kann optimiert werden, indem die createPlayer()-Funktion an das Ende des <body>-Elements verschoben wird. Dadurch wird sichergestellt, dass der Player erst dann erstellt wird, wenn das DOM vollständig geladen ist.

    • Der Event-Handler script.onload kann durch eine Pfeilfunktion vereinfacht werden:

    JavaScript

    script.onload = () => createPlayer();

    • Das while_playing-Element kann durch Hinzufügen der folgenden CSS-Regel standardmäßig ausgeblendet werden:

    CSS

    #while_playing {
  display: none;
}

    War dieser Artikel hilfreich?
    What's Next