Recherche de vignettes avec le lecteur Brightcove

Aperçu

Les images miniatures vidéo permettent aux utilisateurs de parcourir rapidement la barre de progression pour la section qui les intéresse. Brightcove Player affiche des images miniatures lorsque l'utilisateur survole la barre de progression. Cliquer sur la barre de progression les amène à cet emplacement de la vidéo.

Quand les images sont-elles générées ?

Brightcove génère les images dynamiquement sur demande. Toute vidéo ingérée avec Dynamic Delivery aura des images générées à la première demande. Cela garantit que les images ne sont pas créées pour les vidéos inutilisées. Une fois générées, les images sont mises en cache localement et sur le CDN pour une visualisation répétée, comme n'importe quelle autre image.

Quelle est la fréquence d'image d'une vidéo?

La liste des miniatures est filtrée en fonction de la largeur en pixels du lecteur lors de l'initialisation. Cette liste varie considérablement en fonction du style du lecteur, de la taille de la fenêtre, de la plate-forme / de l'appareil, etc. Le plugin de vignettes vise à afficher une nouvelle vignette environ tous les 30 pixels lorsque l'utilisateur survole la barre de progression. Par exemple, si le lecteur mesure 1 500 pixels de large, le lecteur tentera de filtrer la liste jusqu'à 50 miniatures. Les intervalles de temps restants pour les signaux WebVTT sont ajustés en fonction de la durée du contenu.

Exigences

Les exigences suivantes s'appliquent au plug-in de vignettes:

• Vous devez utiliser une version 6.41.0+ de Brightcove Player
• Les vidéos doivent être ingérées pour la livraison dynamique
• Cette fonctionnalité nécessite l'utilisation de l'API Playback v2
• Pour l'insertion d'annonces côté serveur (SSAI), vous devez utiliser le videojs-ssai plugin version 1.10.0+

Exemple de lecteur

Cliquez sur l'exemple ci-dessous et passez la souris sur la barre de progression pour voir les vignettes d'aperçu.

Voir le stylo Plug-in de miniatures par Brightcove Learning Services ( bcls1969 ) sur CodePen.

Code source

Vous pouvez afficher le code source en sélectionnant le HTML dans le CodePen ci-dessus, ou vous pouvez afficher le solution complète sur GitHub.

Commencer

Cette fonctionnalité est disponible pour toute personne disposant d'un compte Brightcove Video Cloud.

Assurez-vous que vos vidéos sont ingérées pour la livraison dynamique.

Implémentation de miniatures à l'aide de Studio

Le moyen le plus simple de configurer votre lecteur pour la recherche de vignettes consiste à utiliser Video Cloud Studio.

1. Ouvrez le JOUEURS module. Utilisez un lecteur existant ou créez-en un nouveau.

2. Sélectionnez le lien du lecteur pour ouvrir les propriétés du lecteur.
3. Dans la navigation de gauche, sélectionnez Les contrôles.

4. Vérifier Recherche de vignettes.

   

5. Pour publier le lecteur, sélectionnez Publier et incorporer> Publier les modifications

   

6. Le plugin vignettes est maintenant configuré pour votre lecteur.

   Utilisez une vidéo ingérée pour la diffusion dynamique et publiez-la avec le lecteur que nous avons configuré dans les étapes ci-dessus. Vous devriez voir des images miniatures lorsque vous survolez la barre de progression du lecteur.

Implémentation des vignettes WebVTT

Si vous choisissez d'utiliser vos propres images miniatures, vous pouvez créer un fichier WebVTT personnalisé et le transmettre au lecteur à l'aide du player.addRemoteTextTrack() méthode. Voici les étapes:

1. Créer un .vtt fichier qui suit le format standard WebVTT. Remplacez le texte de la légende par l'URL de chaque image miniature. Cela peut ressembler à ceci:

   

2. Dans Video Cloud Studio, choisissez une vidéo ingérée pour la diffusion dynamique. Copiez le code d'intégration avancé pour un lecteur avec la version 6.41.0+.
3. Dans le fichier HTML de votre page Web, collez le code d'intégration avancée.
4. dans le head section de votre code HTML ajoutez le fichier CSS des vignettes:

   //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.css

5. dans le body section de votre code HTML ajoutez le fichier JavaScript des vignettes:

   //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.js

6. À la video tag, ajoutez un id propriété.
7. Avant la fermeture body tag, ajoutez un script bloquer.

8. Dans le bloc de script que vous venez de créer, ajoutez ce qui suit:

   Propriété	Montant
   type	Le type mime de votre vidéo
   src	L'URL source de votre vidéo

   Votre code doit être similaire à ceci :

   var player = bc('myPlayerID');
   
   player.thumbnails();
   
   player.ready(() => {
     player.src({
       type: 'video/mp4',
       src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
     });
   });

9. Dans le même bloc de script, ajoutez ce qui suit:

   Une fois le plugin initialisé et le lecteur prêt, vous passerez les sources d'images miniatures au plugin dans un fichier WebVTT en utilisant le addRemoteTextTrack() méthode. Lors de l'appel de la méthode avec le fichier de vignettes, vous devez également définir:

   Propriété	Montant
   src	L'emplacement de votre fichier WebVTT avec des images miniatures
   kind	Mis à metadata
   label	Mis à thumbnails
   mode	Mis à hidden
   addRemoteTextTrack() manualCleanup	Mis à false afin que la piste soit automatiquement supprimée lorsque la source change

   
   

   Votre code doit être similaire à ceci :

   var player = bc('myPlayerID');
   
   player.thumbnails();
   
     player.ready(() => {
       player.src({
         type: 'video/mp4',
         src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
       });
   
     player.addRemoteTextTrack({
       src: 'thumbnails.vtt',
       kind: 'metadata',
       label: 'thumbnails',
       mode: 'hidden'
     }, false);
   });

Code source

Pour plus de détails, consultez le solution complète sur GitHub.

Changelog

Voir le Notes de version du plug-in Vignettes.

Pour les notes de version historiques, voir le changelog ici.