Beispiel für Brightcove Spieler: Autoplay mit Stummschalttaste

Beispiel eines Spielers

Das folgende Video verhält sich je nach Browser/Plattform, auf der Sie das Video ausführen, unterschiedlich. Wenn das Video mit Audio autoplay wird, tut es dies. Wenn nicht, sehen Sie, dass das Video abgespielt wird, aber eine Schaltfläche zum Aufheben der Stummschaltung wird angezeigt. Wenn Sie auf diese Schaltfläche klicken, hören Sie das Audio für das Video. Im Allgemeinen wird ein Video bei Verwendung von iOS, Safari oder Chrome NICHT autotoplay, wenn das Video nicht stumm geschaltet ist. Dieses Beispiel zeigt eine Möglichkeit zum Autoplay des Videos und zeigt eine offensichtliche Schaltfläche zum Aufheben der Stummschaltung.

Wenn Sie eine IMA3-Pre-Roll verwenden, sollten Sie die sehen Verwendung einer Pre-Roll-Anzeige Abschnitt in diesem Dokument. In diesem Abschnitt werden die kleineren Änderungen beschrieben, die Sie auf den im folgenden CodePen gezeigten Code anwenden müssen, damit die Funktionalität mit einer IMA-Peroll-Anzeige funktioniert.

Sehen Sie sich den Stift Autoplay mit Stummschaltung aufheben von Brightcove Learning Services (@rcrooks1969) auf CodePen an.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Verwendete API/Plugin-Ressourcen

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

Neben der Standardeinbeziehung eines id in das video Tag wird der playsinline Attribut wird für iOS-Funktionalität hinzugefügt:

<div id="playerContainer" class="outer">
   <video-js id="myPlayerID"
     data-video-id="5755775186001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     data-application-id=""
     controls=""
     playsinline></video-js>
</div>

Anderes HTML

Keine anderen HTML-Elemente, außer den im vorherigen Abschnitt genannten, werden der Seite hinzugefügt.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

• Verwenden Sie die play() Methode, um das Video abzuspielen. Der Aufruf der Methode ist einer Variablen zugewiesen, die den von einem JavaScript-Versprechen zurückgegebenen Wert enthält.
• Wenn das Versprechen gelöst ist (das Video wird abgespielt), heben Sie die Stummschaltung des Players auf und stellen Sie den Lautstärkepegel ein.
• Wenn das Versprechen abgelehnt wird (das Video wird NICHT abgespielt), führen Sie Folgendes aus:
  • Schalte den Player stumm und starte das Video mit der Wiedergabe (was es jetzt tun wird, da der Player stumm geschaltet ist).
  • Erstellen Sie dynamisch ein HTML-Schaltflächenelement, das als Schaltfläche zum Aufheben der Stummschaltung fungiert.
  • Fügen Sie auf der Schaltfläche einen click Ereignis-Listener hinzu.
  • Konfigurieren Sie den Text, den Stil usw. der Schaltfläche.
  • Platziere den Button über den Spieler.

Versuche das Video abzuspielen

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

// ### Wait for loadedmetadata then try to play video ###

Gemäß der Standardprozedur warten Sie auf das loadedmetadata Ereignis, bevor Sie die play() Methode verwenden. Das vom Methodenaufruf zurückgegebene Versprechen wird in der promise Variablen gespeichert. Wenn das Video abgespielt wird, können Sie die Stummschaltung des Players aufheben und die Lautstärke einstellen.

Wenn Autoplay verhindert wird, schalten Sie den Spieler stumm und spielen Sie Video ab

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

// ### If autoplay prevented: mute the video, play video and display unmute button ###

Hier können Sie mit der catch Logik für das Versprechen handeln, wenn das Video nicht im Player gestartet wurde. Der Player ist programmgesteuert stumm geschaltet, sodass das Video abgespielt wird. Die play() Methode wird erneut aufgerufen, wodurch das Video gestartet wird. Nach diesem Code wird die Schaltfläche dynamisch erstellt und konfiguriert.

Fügen Sie der Schaltfläche einen click Ereignis-Listener hinzu

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

// ### Add button's event listener ###

Mit JavaScripts addEventListener() wird der Ereignishandler für einen Klick dynamisch erstellt. Im Event-Handler wird der Player nicht stummgeschaltet, der Lautstärkepegel eingestellt und zuletzt die Schaltfläche aus dem DOM entfernt.

Konfigurieren Sie den Button

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

// ###  Configure the button ###

In diesem Codeabschnitt wird die Beschriftung der Schaltfläche festgelegt, das Aussehen der Schaltfläche wird konfiguriert und eine class wird für eine CSS-Referenz hinzugefügt, die die Schaltfläche positioniert.

Fügen Sie den Button zum Container hinzu

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

// ### Add the button to the container ###

Die einzelne Codezeile platziert die Schaltfläche in die div, die den Spieler einschränkt.

Verwenden einer Preroll-Anzeige

Da die Anzeige abgespielt wird, wenn die Schaltfläche Stummschaltung aufheben erscheint, müssen Sie die Stummschaltung des Anzeigenspielers anstelle des Content-Players aufheben. Um dies zu tun, verwenden Sie für den Click-Handler Folgendes:

button.addEventListener("click", function() {
  myPlayer.ima3.adPlayer.muted(false);
  myPlayer.ima3.adPlayer.volume(volumeLevel);
  //myPlayer.muted(false);
  //myPlayer.volume(volumeLevel);
  playerContainer.removeChild(button);
}

Die beiden Codezeilen für die Lautstärkeregelung des Content-Players werden auskommentiert und nur aus Gründen des Vergleichs übrig gelassen.

Sie müssen nicht die gleiche Änderung für den Nicht-IOS/Safari/Chrome-Code vornehmen, da das Volume geändert wird, BEVOR die Anzeige geladen wird (auf dem loadstart Event) und diese Änderungen beim Laden an den Anzeigen-Player weitergegeben werden.

In diesem CodePen finden Sie ein Arbeitsbeispiel.

Styling der Anwendung

Die drei CSS-Selektoren führen Folgendes aus:

• Setzt das Video height und width auf 100%, um den Container zu füllen, in den es gelegt wird.
• Erstellt einen Klassenselektor, der mit dem verwendet wird div, der den Player umgibt. Die verwendeten Werte entsprechen der Größe des Spielers.
• Erstellt einen weiteren Klassenselektor, der die Schaltfläche zum Aufheben der Stummschaltung in der Mitte des positioniert div, der den Spieler umgibt.

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: unmute-button.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.