.png){kind=logo}
Onload Callback-Funktion
- 28 Apr 2025
- Drucken
Onload Callback-Funktion
- Aktualisiert am 28 Apr 2025
- Drucken
Artikel-Zusammenfassung
Fanden Sie diese Zusammenfassung hilfreich?
Vielen Dank für Ihr Feedback
Implementierung einer Callback-Funktion für das dynamische Laden von Playern
Beschreibung
In dieser Einführung wird gezeigt, wie Sie eine Callback-Funktion implementieren, mit der Sie Code ausführen können, sobald ein Player geladen wird. Die Funktion kann mehrere Aktionen enthalten, die aufgerufen werden, wenn die API des jeweiligen Players geladen wird. Der Code in diesem Lernprogramm stellt den empfohlenen Ansatz zum dynamischen Hinzufügen eines Players beim Laden vor.
Hinweis: Wenn Lazy Loading aktiviert ist, kann der Player erst dann über die API aufgerufen werden, wenn ein Benutzer auf die Wiedergabe klickt. Dies ist eine inhärente Eigenschaft des Features für träges Laden, das verhindert, dass der Player geladen wird, bis ein Benutzer auf die Wiedergabe klickt. Weitere Informationen zu Lazy Loading finden Sie hier.
Beispiel
Der folgende Code zeigt den empfohlenen Ansatz für das Hinzufügen eines Players beim Laden. In diesem Beispiel wird das Video abgespielt und stummgeschaltet, sobald der Player geladen wird:
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="player_container"></div>
<script type="text/javascript">
//create a new player instance (vmpro)
function createPlayer() {
var initPlayer = {
success: function (playerApi) {
playerApi.play();
playerApi.toggleMute();
},
parameters: {
configType: 'vmpro',
playerId: '<PlayerID>',
videoId: '<VideoID>',
apiUrl: '//d.video-cdn.net/play',
flashPath: '//e.video-cdn.net/v2/',
token: "***"
}
};
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 = createPlayer;
</script>
</body>
</html>
Hinweis: Sie müssen die erforderlichen IDs und URLs im initPlayer-Objekt angeben.
Verwenden Sie die Callback-Funktion
Die Success-Eigenschaft im initPlayer-Objekt definiert die Funktion, die ausgeführt werden soll, sobald der Player geladen ist (die Callback-Funktion). Wenn Sie das initPlayer-Objekt an die addPlayerById-Funktion übergeben, wird das Player-Objekt an Ihre Callback-Funktion gesendet. Sie können dann das Player-Objekt für API-Aufrufe verwenden.
Eine Liste der anderen verfügbaren API-Funktionen finden Sie in der Referenz für Grundfunktionen.
Hinzufügen des Playerskripts
Die Skriptdatei embed.js wird dem head-Tag dynamisch mit JavaScript hinzugefügt. Dies ist die beste Methode zum Hinzufügen der Datei embed.js, da sie das richtige Timing und die richtige Reihenfolge der Vorgänge erleichtert, da Sie die onload-Eigenschaft des Skripts verwenden können, um die Erstellung des Players zu initiieren.
Erstellen des Players
Die Funktion createPlayer wird aufgerufen, wenn das Skript embed.js geladen wird. Mit dieser Funktion wird ein initPlayer-Objekt erstellt, das an die addPlayerById-Funktion der API übergeben wird. Die Parametereigenschaft im initPlayer-Objekt sollte die Attribute aus Ihrem Einbettungscode verwenden. Auf diese Weise können Sie ein leeres div, player_container als Platzhalter einrichten und diese Eigenschaften dynamisch hinzufügen, wenn der Player erstellt wird.
Zusammenfassung
In dieser Einführung wurde gezeigt, wie Sie eine Callback-Funktion implementieren, mit der Sie Code ausführen können, sobald ein Player geladen wird. Die Funktion kann mehrere Aktionen enthalten, die aufgerufen werden, wenn die API des jeweiligen Players geladen wird. Mit dem Code in diesem Lernprogramm wurde der empfohlene Ansatz für das dynamische Hinzufügen eines Players beim Laden vorgestellt.
War dieser Artikel hilfreich?