Beispiel für Brightcove Spieler: Scrollen des Players mit Anzeigen in die Ansicht

In diesem Thema erfahren Sie, wie Sie einen Brightcove-Player verwenden, der mit der Wiedergabe des Videos oder der Anzeige beginnt, sobald Sie den Player vollständig in die Ansicht gescrollt haben, und das Video oder die Anzeige pausiert, wenn Sie aus der Ansicht scrollen. Die Brightcove Player-API play() und pause() Methoden werden aufgerufen, 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 oder die Anzeige abgespielt. Wenn Sie den Player aus dem Blickfeld scrollen, wird das Video oder die Anzeige nicht mehr abgespielt. In diesem Beispiel gibt es einen Preroll, einen überspringbaren Mid-Roll nach fünf Sekunden und einen Postroll.

Sehen Sie sich die Pen 18352-Scrolling-Spieler-View-Anzeigen von Brightcove Learning Services (@rcrooks1969) auf CodePen an.

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 Brightcove Player-Plugins
spielen () IMA3-Plugin
pausieren ()  
am ()  

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 und das JavaScript für das IMA3-Plugin zu importieren. Im head Abschnitt des HTML wird das CSS des IMA3 mit einem <link> HTML-Tag importiert.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Konfigurieren Sie das IMA3-Plugin.
  • 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.
  • Verfolgen Sie Anzeigenereignisse, um festzustellen, ob der normale Brightcove Player oder Anzeigenspieler derzeit verwendet wird.

Konfigurieren Sie das IMA3-Plugin

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

// ### Configure IMA3 plugin

Das IMA3-Plugin ist so konfiguriert, dass es eine VMAP-Konfiguration verwendet, die einen Vor-, Mid- und Postroll abspielt.

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 im Allgemeinen, ob sich der Player im Ansichtsfenster befindet, und spielt das Video dann entweder ab oder pausiert es. Es ist wichtig, dass der Code bestimmt, welcher Spieler verwendet wird, der normale Spieler oder der Anzeigenspieler. Der boolesche Wert isAdPlaying wird basierend auf Anzeigenereignissen (im Event-Handler am unteren Rand des Codes) umgeschaltet, dann wird ein bedingter (ternärer) Operator verwendet, um den currentPlayer variabel den richtigen Spieler. 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.

Verfolge welcher Spieler benutzt wird

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

// ### Set Boolean value for if ad is playing ###

Eine Reihe von Anzeigenereignissen wird überwacht und der boolesche Wert wird entsprechend festgelegt.

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-ads.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.