Grille de vignettes vidéo

Aperçu

Tandis que Galerie de Brightcove propose un système robuste pour la création de portails vidéo, vous pouvez également créer un simple portail de bricolage. Si vous ne souhaitez pas charger un lecteur sur votre page Web avant que l'utilisateur ne choisisse une vidéo, vous pouvez afficher une grille de vignettes vidéo, comme illustré dans cet exemple. Lorsqu'une vignette est sélectionnée, un Brightcove Player est chargé sur la page contenant la vidéo sélectionnée.

Ce dont vous aurez besoin

Tout ce dont vous aurez besoin pour créer ce portail est :

• Un compte Video Cloud
• Une clé de stratégie activée pour la recherche pour authentifier une demande auprès de l'API Playback
• Quelques compétences en développement Web (HTML, CSS et JavaScript)

Considérations sur la conception

Obtention de données vidéo

Bien que l'API CMS API ou Lecture puisse être utilisée pour récupérer des données vidéo, l'API Playback est le choix évident ici pour plusieurs raisons :

• Étant donné que les données de réponse sont mises en cache (jusqu'à 20 minutes), elles sont beaucoup plus rapides
• Il renvoie toutes les données dont vous avez besoin pour lire une vidéo, alors que le CMS API nécessite deux requêtes distinctes pour obtenir les métadonnées vidéo et les sources vidéo
• Il est compatible CORS, ce qui signifie que vous n'avez pas besoin de router la requête API via une application proxy côté serveur

Cependant, l'API Playback propose deux manières de récupérer des données vidéo. Il existe une méthode de base pour obtenir une vidéo par identifiant (ou identifiant de référence), et nous pourrions facilement parcourir un tableau d'identifiants pour demander chacun. Ce n'est cependant pas très efficace.

Une meilleure option consiste à utiliser la méthode de recherche de vidéos, qui nous permet de trouver toutes les vidéos par identifiant et de les renvoyer en une seule demande. Le paramètre de recherche de la requête ressemblera à ceci :

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

Les %20 dans cette chaîne de recherche se trouve un espace codé par URI. Pour plus d'informations sur la syntaxe de recherche, consultez CMS/API de lecture : Recherche de vidéos.

Le joueur

Il n'y a aucune exigence particulière pour le lecteur. Le lecteur Brightcove par défaut fonctionnerait correctement.

Certains utilisateurs peuvent ne regarder aucune vidéo du tout, il est donc inutile d'utiliser la bande passante pour charger un lecteur jusqu'à ce que cela soit nécessaire. Nous utiliserons le Chargeur de lecteur Brightcove pour charger dynamiquement un lecteur la première fois qu'une vidéo est sélectionnée pour la lecture. Pour maximiser les performances, nous préchargerons également le Brightcove Player JavaScript, mais le chargeur de lecteur le fera automatiquement s'il n'est pas déjà présent.

Obtenir une clé de stratégie

Les clés de stratégie sont générées automatiquement pour tous les lecteurs Brightcove. Pour des raisons de sécurité, cependant, les clés de stratégie standard ne permettent pas de rechercher des vidéos à l'aide de l'API de lecture. Pour cet exemple, nous voulons une clé de recherche. Vous pouvez en créer une à l'aide de l'API Policy, mais la méthode la plus simple consiste à utiliser l'exemple d'application Brightcove Learning et à cocher l'option permettant d'obtenir une clé permettant la recherche.

Exemple d'application

Code pour cette application

Vous pouvez trouver le code de cette application dans ce référentiel GitHub.

Codepen

Consultez l'exemple de grille vidéo à stylet de Brightcove Learning Services (@rcrooks1969) sur CodePen.