Willkommen zum ersten Artikel einer technisch orientierten Artikelserie, die in den kommenden Monaten Themen wie die Anpassung des neuen Players, Sicherheit und Transcodierung behandeln wird. Ich wollte über diese Themen sprechen, wenn Brightcove neue Produkte veröffentlicht, da immer wieder ähnliche Fragen von Interessenten, Kunden und Partnern auftauchen. Kunden, die in den Flash-basierten Smartplayer von Brightcove investiert hatten, wollten beispielsweise wissen, wo sie anfangen sollten und in welchem Umfang der neue Player Anpassungen ermöglicht.
Der Brightcove-Player ist ein moderner Videoplayer, der, wo immer möglich, HTML5 verwendet. Es könnte Sie interessieren, dass er als von Brightcove gesponsertes Open-Source-ProjektVideo.js begann. Es wird immer besser und ist eine echte Lösung für den erheblichen Zeitaufwand, den Entwickler für die Erstellung einzigartiger Videoerlebnisse für ihre Besucher aufwenden müssen. Ich möchte Ihnen ein paar Beispiele für die Nutzung dieser Technologie vorstellen.
LEICHT ANPASSBARE HTML5-VIDEOPLAYER
Personalisierung ist in der Regel ein Wort, das bei den Menschen Besorgnis auslöst. Aber keine Angst. Da der Player mit HTML5 erstellt wurde, ist er in hohem Maße anpassbar und erweiterbar. Vielleicht möchten Sie die Farben der Videoplayer-Oberfläche an Ihr Webobjekt anpassen, Metriken sammeln und diese an eine Analyseplattform (außer Brightcove Analytics) senden und Interaktionen auf der Seite ermöglichen - all das ist möglich. Mit ein paar JS- und CSS-Kenntnissen können Sie den Videoplayer nach Belieben und mit Leichtigkeit anpassen.
Die Anpassung der Oberfläche des Videoplayers ist einfach und erfolgt hauptsächlich über CSS. Es ist möglich, die Player-Schaltfläche zu ändern, den Abspielkopfbereich zu verkleinern, die Position der Abspielschaltfläche zu ändern und vieles mehr. Für einfache Anpassungen können Sie mit dem Player-Modul im Studio die Farbe des Abspielbereichs ändern. Für komplexere Änderungen können Sie das CSS des Players entweder auf Seitenebene überschreiben oder dem Player eine CSS-Datei hinzufügen.
Ressource: Anpassen des Erscheinungsbilds des Videoplayers
Ein Beispiel für die Anpassung der Skin des Videoplayers
AUFBAU VON INTERAKTIONEN MIT VIDEOPLAYER-PLUGINS
Der leistungsstärkste Aspekt des Players sind eindeutig die Plugins und On-Page-JS/CSS, die die Interaktionen des Players steuern. Mit diesen Videoplayer-APIs können Sie auf Ereignisse warten und dann eine Aktion ausführen/programmieren. Das kann so einfach sein wie das Hinzufügen einer Download-Schaltfläche oder so komplex wie das Senden von Metriken an Google Analytics oder Omniture.
Ressource: Schnellstart in die Plugin-Entwicklung
Ein Grund für die Integration von Interaktionen in ein Plugin statt auf der Seite ist, dass das Plugin in den Code des Videoplayers integriert werden kann. Als Teil des Erstellungsprozesses des Players wird der JS-Code des Plugins in die JS-Datei des Players aufgenommen und darin verankert, was bedeutet, dass für jede Playeranforderung nur eine einzige Datei gesendet werden muss. Wenn ich ein Plugin erstelle, beginne ich mit der Erstellung der Funktionalität in einer JS-Datei, die auf der Seite mit dem Videoplayer aufgerufen wird. Auf diese Weise kann ich den Plugin-Code überprüfen, in der Entwicklerkonsole nachsehen und den Plugin-Code anpassen. Sobald ich das Plugin so weit entwickelt habe, dass die gewünschte Funktionalität vorhanden ist, packe ich den Code in ein Plugin und füge ihn dem Player hinzu.
Die Codierung eines verwandten Links im Videoplayer kann alle verwandten Inhalte zusammenführen.
Da der Brightcove-Player den Kern des Video.js-Players enthält, gibt es eine umfangreiche Bibliothek von Plugins, die mit dem Brightcove-Player verwendet werden können. Hinweis: Nicht alle Plugins aus der VideoJS-Bibliothek wurden mit dem Brightcove-Player getestet und werden daher in der vorliegenden Form bereitgestellt.
Wenn Sie Platz für Ihre CSS- und/oder JS-Dateien für den Player benötigen, können Sie diese Dateien auch in einem Git-ähnlichen Repository unterbringen. Repositories können für jedes Konto mithilfe der Delivery System API erstellt werden. Sobald Sie das Repository erstellt und die Dateien in das Repository verschoben haben, können diese Dateien vom Player im Abschnitt Plugins referenziert werden.
BEISPIELE FÜR VIDEO-PLAYER-ANPASSUNGEN
Suchen Sie nach Inspirationen, was Sie mit dem Player machen können? In der von Brightcove-Vertriebsingenieuren kuratierten Player Lounge finden Sie großartige Beispiele für die Playeranpassung sowie Artikel mit Schritt-für-Schritt-Anleitungen. Werfen Sie einen Blick auf den Abschnitt Codebeispiele in der Brightcove-Player-Dokumentation, um schnell loszulegen. Ich hoffe, dieser Artikel hat Sie auf den Brightcove-Player neugierig gemacht und gezeigt, wie einfach es ist, die Funktionen des Players zu erweitern. Das nächste Mal werde ich die Transcodierung behandeln.
