Beispiel für Brightcove Spieler: Laden Sie das Video Plugin herunter

Beispiel eines Spielers

Auf der rechten Seite der Kontrollleiste befindet sich ein Download-Symbol, mit dem Sie die MP4-Wiedergabe des im Player geladenen Videos in höchster Qualität herunterladen können. Sobald Sie darauf klicken, beginnt der Download und Sie sehen den Prozentsatz der heruntergeladenen Daten sowie einen Indikator (drei animierte Punkte), der den Fortschritt anzeigt, wie hier zu sehen ist:

Die Schaltfläche kann nur einmal angeklickt werden, um versehentliche Mehrfach-Downloads zu vermeiden. Beachten Sie, dass dieses Plugin auch mit Videos in einer Wiedergabeliste funktioniert.

Es gibt ein SEHR ähnliches Beispiel, das Audio anstelle von Video-Assets im Brightcove Player-Beispiel verwendet: Laden Sie das Audio Plugin Dokument herunter.

Siehe das Video Plugin zum Herunterladen von Stiften von Brightcove Learning Services (@rcrooks1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Sie können den Download-Button nicht nur in der Steuerleiste platzieren, sondern auch über den Player oder auf der HTML-Seite platzieren, wie hier gezeigt:

• Overlay auf dem Video platziert

  

• Ein HTML-Link, den Sie überall auf Ihrer HTML-Seite platzieren können

  

Informationen zur Implementierung dieser verschiedenen Standorte finden Sie am Ende dieses Dokuments.

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

Für den Brightcove Player, den Sie für dieses Beispiel erstellen, ist keine spezielle Konfiguration erforderlich.

Anderes HTML

Es sind keine anderen HTML-Änderungen erforderlich.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

• Holen Sie sich den Videonamen und extrahieren Sie die MP4-Darstellungen aus dem Videoquellen-Array.
• Durchlaufen Sie alle Videowiedergaben und extrahieren Sie die MP4-Versionen.
• Sortieren Sie das MP4-Array nach dem size Attribut, das am größten bis kleinsten ist.
• Weisen Sie das größte Video einer Variablen zu.
• Erstellen Sie ein anklickbares SVG-Bild, das das Video in ein div HTML-Element herunterlädt.
• Platzieren Sie das SVG-Bildelement des Download-Videos im DOM.
• Verwenden Sie ein XMLHttpRequest()-Objekt , um den Download zu starten und den Fortschritt zu verfolgen.

Holen Sie sich den Videonamen und extrahieren Sie die MP4-Formatvarianten aus dem Videoquellen-

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

// +++ Get video name and the MP4 renditions +++

Zuerst wird der videoName Variablen der Name des Videos (mit entfernten Leerzeichen) zur Verwendung in dem HTML-Anker-Tag zugewiesen, das später im Code dynamisch erstellt wurde. Als nächstes werden der renditionsAra Variablen alle möglichen Formatvarianten für das Video zugewiesen.

Durchlaufen Sie alle Videowiedergaben und extrahieren Sie die MP4-Versionen

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

// +++ Loop over videos and extract only MP4 versions +++

Schleife über das Array und weise dem zu mp4Ara variable Wiedergaben, bei denen die container ist MP4 , UND die Wiedergabe hat a src Eigentum. Die MP4-Formatvarianten erscheinen zweimal im sources Array, einmal mit einer src Eigenschaft und einmal mit einem stream_name eigentum. Der erste ist für den progressiven Download und der zweite für das Streaming.

Die folgenden Screenshots zeigen, dass die Konsole alle Formatvarianten und dann die gefilterten Formatvarianten in MP4-Formatvarianten anzeigt.

Sortieren Sie das MP4-Array nach dem size Attribut, das am größten zum kleinsten

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

// +++ Sort the renditions from highest to lowest on size +++

Sortieren mp4Ara Sie die sort() Methode mit JavaScript

Weisen Sie das größte Video einer Variablen zu

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

// +++ Extract the highest rendition +++

Weisen Sie der highestQuality Variablen den Null-Indexwert aus dem sortierten MP4-Formatvarianten-Array zu.

Erstellen Sie ein Element, das ein anklickbares Bild in einem div HTML-Element enthält

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

// +++ Build the download image element +++

Oben im JavaScript-Code werden HTML div und img Elemente erstellt und in Variablen gespeichert. Diese Elemente werden dann mithilfe von CSS und SVG-Bildern manipuliert, um dynamisch ein HTML-Element zu erstellen, das als Download-Schaltfläche fungiert. Der HTML-Quelltext für das dynamisch erstellte Element sieht wie folgt aus:

<div class="vjs-control downloadStyle">
  <a href="http://f12.cf.brightcove.com/1752604059001/1752604059001_4457269242001_4457254747001.mp4?pubId=1752604059001&amp;videoId=4457254747001" title="Download Sea Marvels Collection"></a>
</div>

Platzieren Sie das Download-Schaltflächenelement im DOM

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

// +++ Place the download button +++

In diesem Fall wird die Download-Button im Abstandshalter der Steuerleiste platziert. Zuerst wird ein Verweis auf das Abstandselement erhalten, dann wird ein Attribut definiert, das das neue Element im Abstandshalter positioniert, und zuletzt das neue Element im Abstandshalter platziert.

Starten Sie den Download auf Klick des Benutzers

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

// +++ On image click call the download function +++

Hier wird das XMLHttpRequest()-Objekt instanziiert, die Funktion download() aufgerufen, die das Herunterladen im selben Browserfenster/Tab erzwingt, und der Fortschritt wird überwacht und angezeigt.

Styling der Anwendung

Mit CSS wird die Größe und Position des Download-Ankers für die Platzierung in der Kontrollleiste festgelegt. Sie definiert auch SVG-Bilder für das Download-Symbol und die animierten Punkte, die den Fortschritt anzeigen.

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: download-video.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.

Overlay-Implementierung

Um das Symbol in der Steuerleiste zu ersetzen und das Video zu überlagern, müssen Sie einige Änderungen vornehmen.

Entfernen Sie zuerst im JavaScript den gesamten Code, der das verknüpfte Symbol erstellt und anzeigt. Ersetzen Sie diesen Code durch Code, der ein Overlay erstellt und anhängt.

downloadString = "<a href='" + highestQuality + "' download='" + videoName + "'>Download the Video</a>";
overlay = document.createElement('p');
overlay.innerHTML = downloadString;
overlay.id = 'download-overlay';
myPlayer.el().appendChild(overlay);

Sie müssen auch CSS verwenden, um das Overlay zu stylen und zu platzieren, was offensichtlich an Ihre Implementierung angepasst werden kann.

#download-overlay {
    background-color: #FFFFFF;
    color: #000000;
    font-size: 1em;
    padding: 2px;
    position: absolute;
    bottom: 35px;
    left: 485px;
    width: 135px;
    text-align: center;
}

Wenn Sie diesen Ansatz für Ihr Plugin verwenden möchten, müssen Sie das CSS in eine separate Datei einfügen, in einer für das Internet zugänglichen URL speichern und diese URL eingeben, wenn Sie das Plugin einem Player in Studio zuordnen.

Implementierung von HTML-Seiten

Um das Symbol in der Steuerleiste zu ersetzen und einen Speicherort auf Ihrer HTML-Seite für einen Download-Link zu definieren, müssen Sie einige Änderungen vornehmen.

Bestimmen Sie zunächst auf Ihrer HTML-Seite, wo Sie den Link einfügen möchten, und platzieren Sie den folgenden HTML-Code dort.

<p id="insertionPoint"></p>

Entfernen Sie als Nächstes im JavaScript den gesamten Code, der das verknüpfte Symbol erstellt und anzeigt. Ersetzen Sie diesen Code durch Code, der einen Hyperlink erstellt und diesen Hyperlink dynamisch in die HTML-Seite an Ihrer Einfügemarke injiziert.

downloadString = "<a href='" + highestQuality + "' download='" + videoName + "'>Download the Video</a>";
document.getElementById('insertionPoint').innerHTML = downloadString;