In diesem Beispiel sehen Sie nach einer festgelegten Zeitspanne eine Overlay-Meldung. In diesem Beispiel wird das Overlay in 6 Sekunden angezeigt, aber die Zeit ist konfigurierbar. Wenn der Betrachter innerhalb einer bestimmten Zeit auf die Nachricht klickt, wird die Wiedergabe fortgesetzt. Wenn nicht, wird das Video angehalten. Diese Technik ist nützlich, wenn Sie Langform-Inhalte haben. Dies verhindert, dass Sie Bandbreite für Zuschauer verschwenden, die anfangen, ein Video abzuspielen und dann etwas anderes zu tun, ohne sich die Mühe zu machen, es zu stoppen.
In diesem Beispiel wird ein Open Source Video.js Plugin verwendet, das sich unter https://github.com/TylerZubke/Videojs-AFK-Monitor befindet. Der Beispielcode in diesem Dokument verwendet dieses Plugin.
Siehst du den Stift Beobachtest du immer noch? von Brightcove Learning Services (@rcrooks1969) auf CodePen.
Sehen Sie sich die Komplettlösung auf GitHub an.
Hier sind einige Tipps zur effektiven Verwendung des obigen CodePen:
Hier ist die empfohlene Entwicklungssequenz:
Weitere Informationen zu diesen Schritten finden Sie in der Schritt-für-Schritt-Anleitung: Leitfaden zur Entwicklung von Plugins
Bei der Entwicklung von Verbesserungen für den Brightcove Player müssen Sie entscheiden, ob der Code am besten für die Iframe- oder In-Page-Einbettungsimplementierung geeignet ist. Die Best Practice-Empfehlung besteht darin, ein Plugin zur Verwendung mit einer Iframe-Implementierung zu erstellen. Die Vorteile der Verwendung des iFrame-Players sind:
Obwohl die Integration des In-Page-Einbettungsplayers komplexer sein kann, planen Sie Ihren Code in dieser Implementierung manchmal. Um zu verallgemeinern, ist dieser Ansatz am besten, wenn die enthaltende Seite mit dem Spieler kommunizieren muss. Im Einzelnen sind hier einige Beispiele:
Selbst wenn Ihre endgültige Implementierung den Iframe-Code nicht verwendet, können Sie den In-Page-Einbettungscode trotzdem mit einem Plugin für Ihr JavaScript und einer separaten Datei für Ihr CSS verwenden. Dies kapselt Ihre Logik, sodass Sie sie problemlos in mehreren Spielern verwenden können.
| API-Methoden | API-Ereignisse | Brightcove Player-Plugins |
|---|---|---|
| addClass () | useractive | Overlay-Plugin |
| removeClass () | userinactive | |
| pausieren () | ||
| currentTime () | ||
| eins () | ||
| am () | ||
| setTimeout () | ||
| hasClass () | ||
| dauer () | ||
| pausiert () | ||
| cleArtimeOut () | ||
| hasStarted () | ||
| el () |
Dieser Abschnitt beschreibt jede spezielle Konfiguration, die während der Spielererstellung erforderlich ist. Darüber hinaus werden andere HTML-Elemente beschrieben, die der Seite über den In-Page-Einbettungsplayer-Implementierungscode hinaus hinzugefügt werden müssen.
Für den Brightcove Player, den Sie für dieses Beispiel erstellen, ist keine spezielle Konfiguration erforderlich.
Die CSS- und JavaScript-Dateien des Drittanbieter-Plugins sind enthalten.
Die grundlegende Logik hinter dieser Anwendung lautet:
useractive Und userinactive Ereignisse werden beobachtet, um die Zeit zu verfolgen.Das Plugin wird mit Best Practices aufgerufen, wie hier gezeigt
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
var options = {'showMessageAfter': 1000, 'pausePlayerAfter': 1000};
myPlayer.AFKMonitor(options);
});
</script>
Eine Reihe von Optionen kann verwendet werden, um das Plugin anzupassen. Einige Details sind:
showMessageAfter(in Millisekunden) bestimmt die Zeit, bis die Schaltfläche angezeigt wird.
pausePlayerAfter(in Millisekunden) sind ebenfalls hilfreich. Zu diesem Zeitpunkt erlauben Sie dem Benutzer, auf die Schaltfläche zu klicken, bevor der Player angehalten wird. Dies gibt dem Benutzer die Möglichkeit, auf die Schaltfläche zu klicken, ohne die Videowiedergabe zu unterbrechen.Das CSS ist Teil des Plugins von Drittanbietern.
Sie möchten das Repo klonen, um auf den Code zuzugreifen, und ihn dann an einem für Sie zugänglichen Ort platzieren.
Wie bereits erwähnt, können Sie den JavaScript-Code des Plugins im entsprechenden GitHub-Repo dieses Dokuments sehen: videojs.afk-monitor.js.
Sobald Sie die CSS- und JavaScript-Dateien des Plugins an einem für das Internet zugänglichen Ort gespeichert haben, können Sie das Plugin mit einem Player verwenden. Im Studio SPIELER Modul können Sie einen Spieler wählen, dann in der PLUGINS fügen Sie die URLs zu den CSS- und JavaScript-Dateien hinzu und fügen Sie auch die Name und Optionen , wenn Optionen benötigt werden.