Video-Thumbnail-Raster

Überblick

Während Brightcove-Galerie bietet ein robustes System zum Erstellen von Videoportalen, Sie können auch ein einfaches Do-it-yourself-Portal erstellen. Wenn Sie keinen Player auf Ihrer Webseite laden möchten, bevor der Benutzer ein Video auswählt, können Sie ein Video-Thumbnail-Raster anzeigen, wie in diesem Beispiel gezeigt. Wenn eine Miniaturansicht ausgewählt wird, wird ein Brightcove-Player auf der Seite mit dem ausgewählten Video geladen.

Was wirst du brauchen

Alles, was Sie brauchen, um dieses Portal zu erstellen, sind:

• Ein Video Cloud-Konto
• Ein suchaktivierter Richtlinienschlüssel zum Authentifizieren einer Anfrage an die Playback API
• Einige Kenntnisse in der Webentwicklung (HTML, CSS und JavaScript)

Überlegungen zum Entwurf

Abrufen von Videodaten

Obwohl entweder die CMS API oder die Wiedergabe-API kann zum Abrufen von Videodaten verwendet werden. Die Wiedergabe-API ist hier aus mehreren Gründen die offensichtliche Wahl:

• Da Antwortdaten zwischengespeichert werden (bis zu 20 Minuten), ist es viel schneller
• Es gibt alle Daten zurück, die Sie zum Abspielen eines Videos benötigen, während die CMS API erfordert zwei separate Anforderungen, um die Videometadaten und die Videoquellen abzurufen
• Es ist CORS-fähig, d. h. Sie müssen die API-Anfrage nicht über eine serverseitige Proxy-App weiterleiten

Die Playback API bietet jedoch zwei Möglichkeiten zum Abrufen von Videodaten. Es gibt eine grundlegende Methode, um ein Video nach ID (oder Referenz-ID) abzurufen, und wir könnten leicht über ein Array von IDs iterieren, um jede einzelne anzufordern. Das ist jedoch nicht sehr effizient.

Eine bessere Option ist die Verwendung der Videosuchmethode, mit der wir alle Videos nach ID finden und mit einer Anfrage zurückgeben können. Der Suchparameter für die Anfrage sieht wie folgt aus:

q=id:6543217890%20id:1234567890%20id:987654321...

Die %20 in dieser Suchzeichenfolge ist ein URI-codiertes Leerzeichen. Weitere Informationen zur Suchsyntax finden Sie unter CMS/Wiedergabe-API: Videosuche.

Der Spieler

Es gibt keine besonderen Anforderungen für den Player - der Standard-Brightcove-Player würde gut funktionieren.

Einige Benutzer sehen sich möglicherweise überhaupt keine Videos an, daher macht es keinen Sinn, Bandbreite zu verwenden, um einen Player zu laden, bis er benötigt wird. Wir werden die verwenden Brightcove Player Loader um einen Player dynamisch zu laden, wenn ein Video zum ersten Mal zur Wiedergabe ausgewählt wird. Um die Leistung zu maximieren, laden wir auch das Brightcove Player-JavaScript vorab, aber der Player-Loader wird dies automatisch tun, wenn er nicht bereits vorhanden ist.

Einen Richtlinienschlüssel erhalten

Richtlinienschlüssel werden automatisch für alle Brightcove-Player generiert. Aus Sicherheitsgründen ermöglichen die Standardrichtlinienschlüssel jedoch nicht die Suche nach Videos mithilfe der Playback-API. Für dieses Beispiel benötigen wir einen suchaktivierten Schlüssel. Sie können eine mit der Policy-API erstellen. Am einfachsten ist es jedoch, die Brightcove-Learning-Beispiel-App zu verwenden und die Option zu aktivieren, um einen suchfähigen Schlüssel zu erhalten.

Beispiel-App

Code für diese App

Den Code für diese App finden Sie in dieses GitHub-Repository.

Codepen

Sehen Sie sich das Pen Video Grid Sample von Brightcove Learning Services (@rcrooks1969) auf CodePen an.