Beispiel für Brightcove Spieler: Spieler in die Ansicht scrollen

In diesem Thema erfahren Sie, wie Sie einen Brightcove-Player verwenden, der mit der Wiedergabe des Videos beginnt, sobald Sie den Player vollständig in die Ansicht gescrollt haben, und das Video anhält, wenn Sie es aus der Ansicht scrollen. Wir rufen die Brightcove Player API play() und pause() Methoden auf, um das Video basierend auf der Position des Players zu starten und zu stoppen.

Beispiel eines Spielers

Scrollen Sie den Spieler in und aus dem Blickfeld. Wenn der Player vollständig in die Ansicht gescrollt wird, wird das Video abgespielt. Wenn Sie den Player aus dem Blickfeld scrollen, wird das Video nicht mehr abgespielt.

Siehe den Pen 18202-Scrolling-Player-Ansicht von Brightcove Learning Services (@rcrooks1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

CodePen verwenden

Hier sind einige Tipps zur effektiven Verwendung des obigen CodePen:

  • Schalten Sie die tatsächliche Anzeige des Players um, indem Sie auf klicken Result Taste.
  • Drücke den HTML/CSS/JS Schaltflächen zur Anzeige EINES der Codetypen.
  • Später in diesem Dokument werden die Logik, der Ablauf und das Styling der Anwendung in der Player/HTML-Konfiguration, im Anwendungsfluss und im Anwendungsstyling diskutiert Abschnitte. Der beste Weg, um den Informationen in diesen Abschnitten zu folgen, besteht darin:
    1. Drücke den EDIT ON CODEPEN Klicken Sie im CodePen auf die Schaltfläche und halten Sie den Code in einem Browser / einer Browser-Registerkarte bereit.
    2. Passen Sie in CodePen an, welcher Code angezeigt werden soll. Sie können die Breite verschiedener CodeAbschnitte in CodePen ändern.
    3. Sieh den Player-/HTML-Konfiguration , Bewerbungsablauf und/oder Bewerbungsstyling Abschnitte in einem anderen Browser/Browser-Tab. Sie können nun den Codeerklärungen folgen und gleichzeitig den Code anzeigen.

Verwendete API/Plugin-Ressourcen

API-Methoden
spielen ()
pausieren ()

Ein wichtiges JavaScript-Ereignis in diesem Code ist onscroll. Dieses Ereignis wird ausgelöst und in diesem Code jedes Mal behandelt, wenn das window Element gescrollt wird.

Player-/HTML-Konfiguration

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.

Player-Konfiguration

Das muted Attribut wurde dem Player hinzugefügt, um Autoplay-Probleme zu vermeiden. Siehe die Überlegungen zur automatischen Wiedergabe Dokument für Details.

Anderes HTML

Ein <script> HTML-Tag wird verwendet, um die jQuery-Bibliothek zu importieren.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Hör auf Scroll-Events.
  • Wenn ein Bildlaufereignis behandelt wird, prüfen Sie, ob sich der Player im Ansichtsfenster befindet oder nicht.
  • Wenn der Player im Ansichtsfenster ist, geben Sie das Video ab, falls dies nicht der Fall ist, pausieren Sie das Video.

Hören Sie auf alle Scroll-Ereignisse im Fensterelement

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### Execute every time page is scrolled ###

Diese eine Codezeile ruft die checkIfVideoInView() Methode bei jedem window.onscroll Ereignisversand auf.

Behandle die Bildlauf-Ereignisse

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### Called on scroll, check if in view and the play/pause ###

Die checkIfVideoInView() Event-Handler-Funktion prüft, ob sich der Player im Ansichtsfenster befindet, und spielt das Video dann entweder ab oder pausiert es. Die isScrolledIntoView() Methode wird in einer if -Anweisung verwendet, um zu überprüfen, ob sich der Player im Ansichtsfenster befindet. Natürlich gibt die isScrolledIntoView() Methode einen booleschen Wert zurück.

Prüfen Sie, ob sich der Spieler vollständig im Ansichtsfenster befindet

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### Checks if player is in view ###

Diese Funktion, die einen booleschen Wert zurückgibt, verwendet jQuery, um festzustellen, ob sich der Player vollständig im Ansichtsfenster befindet.

Styling der Anwendung

Das einzige CSS legt die Spielergröße fest.

Plugin-Code

Normalerweise sind bei der Umwandlung des JavaScript in ein Brightcove Player-Plugin nominelle Änderungen erforderlich. Eine erforderliche Änderung besteht darin, die Standardverwendung der ready() Methode durch den Code zu ersetzen, der ein Plugin definiert.

Hier ist der sehr häufig verwendete Start zu JavaScript-Code, der mit dem Player funktioniert:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

Sie ändern die erste Zeile, um die Standardsyntax zum Starten eines Brightcove Player-Plugins zu verwenden:

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

Wie bereits erwähnt, können Sie den JavaScript-Code des Plugins im entsprechenden GitHub Repo dieses Dokuments sehen: scroll-into-view.js.

Verwenden des Plugins mit einem Player

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.