Paper Contacter le support | état du système L'état du système
Contenu de la page

    Grille de vignettes vidéo

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

    Vue d'ensemble

    Tandis que Brightcove Gallery offre un système robuste pour la construction de portails vidéo, vous pouvez également créer un portail simple à faire soi-même. Si vous ne souhaitez pas charger un player sur votre page Web avant que l'utilisateur ne choisisse une vidéo, vous pouvez afficher une grille de vignettes vidéo comme indiqué dans cet exemple. Lorsqu'une miniature est sélectionnée, un Brightcove Player est chargé sur la page avec la vidéo sélectionnée.

    Ce dont tu auras besoin

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

    • A Video Cloud Compte
    • Une clé de stratégie activée pour la recherche pour authentifier une demande adressée au Playback API
    • Quelques compétences en développement Web (HTML, CSS et JavaScript)

    Considérations sur la conception

    Obtenir des données vidéo

    Bien que le CMS API ou le Playback API peut être utilisé pour récupérer des données vidéo, le Playback API 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, tandis que le CMS API nécessite deux demandes 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 d'acheminer la demande d'API via une application proxy côté serveur

    Toutefois, malgré la Playback API propose deux méthodes pour récupérer les 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 d'eux. Ce n'est cependant pas très efficace.

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

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

    La %20 dans cette chaîne de recherche se trouve un espace encodé en URI. Pour plus d'informations sur la syntaxe de recherche, voir CMS /Playback API: Recherche de vidéos.

    La player

    Il n'y a pas d'exigences particulières pour le player - le défaut Brightcove Player fonctionnerait très bien.

    Certains utilisateurs peuvent ne pas regarder de vidéos du tout, il est donc inutile d'utiliser la bande passante pour charger un player jusqu'à ce qu'il soit nécessaire. Nous utiliserons le Brightcove Player Chargeur pour charger un player dynamiquement 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 player loader le fera automatiquement s'il n'est pas déjà présent.

    Obtenir une clé de politique

    Les clés de stratégie sont automatiquement générées pour tous Brightcove Players. 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 Playback API. Pour cet exemple, nous voulons une clé activée pour la recherche. Vous pouvez en créer un en utilisant le Policy API, mais le moyen le plus simple est d'utiliser le Exemple d'application d'apprentissage Brightcove et assurez-vous de cocher 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 le stylo Exemple de grille vidéo par Brightcove Learning Services (@rcrooks1969) sur CodePen.

    Utilisation du CodePen

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

    • Basculer l'affichage réel du player en cliquant sur le Le résultat .
    • Cliquez HTML / CSS / JS boutons pour afficher l'un des types de code.
    • Cliquez Modifier sur CodePen dans le coin supérieur droit pour bifurquer ce CodePen dans votre propre compte.
    • Trouver tout le code associé à cet exemple dans cette GitHub référentiel.

    Dernière mise à jour de la page le 28 sept.2020