assistance Contacter le support | Étatétat du système du système
Contenu de la page

    Grille de vignettes vidéo

    Dans cet exemple, vous apprendrez comment utiliser l'API Lecture pour récupérer un groupe de vidéos par ID, les afficher dans une grille et lancer des vidéos dans un lecteur lorsque l'utilisateur clique sur une vignette - en d'autres termes, créer un portail vidéo simple.

    Présentation

    Bien que Brightcove Gallery offre un système robuste pour créer des portails vidéo, vous pouvez également créer un portail simple bricolage. Si vous ne souhaitez pas charger un lecteur sur votre page Web avant que l'utilisateur choisit une vidéo, vous pouvez afficher une grille de vignettes vidéo comme indiqué dans cet exemple. Lorsqu'une vignette est sélectionnée, un lecteur Brightcove est chargé sur la page avec la vidéo sélectionnée.

    De quoi ai-je besoin ?

    Tout ce dont vous aurez besoin pour construire ce portail sont :

    • Un compte Video Cloud
    • Une clé de stratégie activée pour la recherche pour authentifier une requête à l'API de lecture
    • Quelques compétences en développement web (HTML, CSS et JavaScript)

    Considérations de 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 activé CORS, ce qui signifie que vous n'avez pas besoin d'acheminer la demande d'API via une application proxy côté serveur

    Cependant, l'API de lecture offre deux façons d'extraire des données vidéo. Il existe une méthode de base pour obtenir une vidéo par id (ou identifiant de référence), et nous pourrions facilement itérer sur un tableau d'identifiants pour demander chacun. Ce n'est toutefois pas très efficace.

    Une meilleure option est d'utiliser la méthode de recherche vidéo, qui nous permet de trouver toutes les vidéos par id et de les retourner avec une seule demande. Le paramètre de recherche de la requête ressemblera à ceci :

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

    %20 Dans cette chaîne de recherche est un espace encodé par URI. Pour plus d'informations sur la syntaxe de recherche, voir CMS/API de lecture : Recherche de vidéos.

    Le joueur

    Il n'y a pas d'exigences particulières pour le joueur - 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 qu'il soit nécessaire. Nous utiliserons le chargeur de lecteur Brightcove pour charger un lecteur de manière dynamique lors de la première sélection d'une vidéo pour la lecture. Pour maximiser les performances, nous préchargerons également le JavaScript Brightcove Player, mais le chargeur 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 automatiquement générées pour tous les joueurs de Brightcove. Toutefois, pour des raisons de sécurité, les clés de stratégie standard n'autorisent pas la recherche de vidéos à l'aide de l'API Lecture. Pour cet exemple, nous voulons une clé activée pour la recherche. Vous pouvez en créer une à l'aide de l' API Policy, mais le moyen le plus simple est d'utiliser l' exemple d'application d'apprentissage Brightcove et de vérifier que vous cochez l'option pour obtenir une clé activée pour la recherche.

    Exemple d'application

    Code pour cette application

    Vous pouvez trouver le code de cette application dans ce dépôt GitHub.

    Codepen

    Voir l' exemple de grille vidéo de stylo par Brightcove Learning Services (@rcrooks1969 ) sur CodePen.

    Utilisation du CodePen

    Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :

    • Basculez l'affichage réel du joueur en cliquant sur le bouton Résultat .
    • Cliquez sur les boutons HTML/CSS/JS pour afficher L'UN des types de code.
    • Cliquez sur Modifier sur CodePen dans le coin supérieur droit pour incorporer ce CodePen dans votre propre compte.
    • Trouvez tout le code associé à cet exemple dans ce dépôt GitHub.