Support Kontakt Support | Systemstatus Systemstatus
Seiteninhalt

    Video Thumbnail Grid

    In diesem Beispiel lernen Sie, wie Sie das Playback API Um eine Gruppe von Videos nach ID abzurufen, zeigen Sie sie in einem Raster an und starten Sie Videos in einem player Wenn der Benutzer auf eine Miniaturansicht klickt, erstellen Sie mit anderen Worten ein einfaches Videoportal.

    Überblick

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

    Was du brauchen wirst

    Alles, was Sie zum Erstellen dieses Portals benötigen, sind:

    • A Video Cloud Konto
    • Ein suchfähiger Richtlinienschlüssel zur Authentifizierung einer Anforderung an die Playback API
    • Einige Webentwicklungsfähigkeiten (HTML, CSS und JavaScript)

    Entwurfsüberlegungen

    Videodaten abrufen

    Obwohl entweder die CMS API oder Playback API kann verwendet werden, um Videodaten abzurufen, die Playback API ist hier aus mehreren Gründen die offensichtliche Wahl:

    • Da Antwortdaten zwischengespeichert werden (bis zu 20 Minuten), sind sie 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, dh Sie müssen die API-Anforderung nicht über eine serverseitige Proxy-App weiterleiten

    Allerdings ist die Playback API bietet zwei Möglichkeiten zum Abrufen von Videodaten. Es gibt eine grundlegende Methode, um ein Video anhand der ID (oder Referenz-ID) abzurufen, und wir können problemlos ü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 anhand ihrer ID finden und mit einer Anfrage zurücksenden können. Der Suchparameter für die Anforderung sieht folgendermaßen aus:

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

    Das %20 In dieser Suchzeichenfolge befindet sich ein URI-codierter Bereich. Weitere Informationen zur Suchsyntax finden Sie unter CMS /Playback API: Videos suchen.

    Das player

    Es gibt keine besonderen Anforderungen an die 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 zum Laden von a zu verwenden player bis es gebraucht wird. Wir werden die verwenden Brightcove Player Ladeprogramm laden a player Dynamisch, wenn zum ersten Mal ein Video für die Wiedergabe ausgewählt wird. Um die Leistung zu maximieren, werden wir auch die vorladen Brightcove Player JavaScript, aber die player Der Lader führt dies automatisch aus, wenn er noch nicht vorhanden ist.

    Erhalten eines Richtlinienschlüssels

    Richtlinienschlüssel werden automatisch für alle generiert Brightcove Players. Aus Sicherheitsgründen ermöglichen die Standardrichtlinienschlüssel jedoch nicht die Suche nach Videos mit dem Playback API. Für dieses Beispiel möchten wir einen suchfähigen Schlüssel. Sie können eine mit der erstellen Policy API, aber der einfachste Weg ist die Verwendung der Brightcove Lernbeispiel-App und stellen Sie sicher, dass Sie die Option 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

    Sieh den Stift Beispiel für ein Videogitter von Brightcove Learning Services (@ rcrooks1969) auf CodePen.

    Verwenden des CodePen

    Hier sind einige Tipps, um den oben genannten CodePen effektiv zu nutzen:

    • Schalten Sie die tatsächliche Anzeige des um player durch Klicken auf Ergebnis .
    • Klicken Sie auf die HTML / CSS / JS Schaltflächen, um einen der Codetypen anzuzeigen.
    • Klicken Sie Auf CodePen bearbeiten in der oberen rechten Ecke, um diesen CodePen in Ihr eigenes Konto einzugeben.
    • Hier finden Sie den gesamten mit diesem Beispiel verbundenen Code GitHub-Repository.

    Seite zuletzt aktualisiert am 28