Ajout d'une image superposée à une vidéo

Dans cette rubrique, vous apprendrez à ajouter une image superposée à une vidéo.

Brightcove Interactivity Studio permet d'ajouter différents types de superpositions interactives aux vidéos. Des superpositions de textes et d'images peuvent être affichées sur les vidéos pendant leur lecture. Par exemple, les superpositions peuvent afficher un texte supplémentaire ou le logo d'une entreprise sur une vidéo. Les incrustations peuvent également être cliquables et ouvrir des pages web supplémentaires si nécessaire.

Préliminaires

Avant d'ajouter de l'interactivité à un lecteur, vous devez disposer d'un lecteur Brightcove compatible avec HapYak et vous assurer qu'un projet d'interactivité Brightcove a été créé. Pour plus d'informations sur la manière de procéder, voir la section Premiers pas avec l'interactivité.

Ajout d'une image superposée

Les incrustations d'images sont utilisées pour afficher une image sur une vidéo pendant la lecture. La superposition peut également être cliquable et ouvrir une autre page du navigateur lorsque l'on clique dessus. Dans l'exemple suivant, l'image superposée apparaît au point 75 % de la vidéo et reste affichée jusqu'à la fin de la vidéo. En cliquant sur la superposition, un lien s'ouvrira dans un nouvel onglet du navigateur et la vidéo sera mise en pause.


Procédez comme suit pour ajouter une image superposée à un projet :

  1. Connectez-vous à Brightcove Interactivity Studio(https://www.hapyak.com/login).
  2. Dans la navigation de gauche, cliquez sur Gérer.
  3. Cliquez sur un projet pour l'ouvrir.
  4. Dans la barre d'outils inférieure, cliquez sur le bouton de superposition d'images.
  5. Cliquez sur Choisir un fichier et parcourez et sélectionnez une image ou cliquez sur l'onglet URL et entrez l'URL d'un fichier image.
  6. Cliquez sur Afficher.
  7. L'image s'affiche dans l'onglet Aperçu . Cliquez sur SOUMETTRE.
  8. Cliquez et faites glisser l'incrustation à l'endroit où vous souhaitez qu'elle apparaisse sur la vidéo.
  9. Cliquez sur le menu Heure de démarrage .
  10. Saisir une heure de début en secondes, en pourcentage ou en format horaire. Cet exemple définit l'heure de début au point 75 % de la vidéo. Cliquez sur SOUMETTRE.
  11. Cliquez sur l'icône de l'horloge pour définir la durée de la superposition. Cliquez sur SOUMETTRE.
  12. Cliquez sur le menu Lien .
  13. Saisissez une URL à laquelle vous serez redirigé lorsque vous cliquerez sur l'image superposée.
  14. (Facultatif) Cliquez sur l'onglet COMPORTEMENT et demandez à la vidéo de s' interrompre au clic de la vidéo. Cliquez sur SOUMETTRE.
  15. Cliquez sur Done.

Publiez la vidéo à l'aide du module médias et confirmez l'apparition de la superposition.

Des astuces

Taille du fichier

Les annotations d'images sont chargées dynamiquement lorsque le spectateur atteint un certain point dans la vidéo. C'est donc une bonne idée (comme pour toutes les images sur le web) d'assurer un bon équilibre entre une haute qualité et une faible taille de fichier. Une bonne règle de base pour les annotations d'images est de les maintenir en dessous de 200 KB. Comme pour toute technologie basée sur le web, plus vous chargez d'images, plus le temps de chargement de la page est long.

PNG ou JPG ?

La plupart des annotations d'images que nous voyons sont au format PNG, car elles comprennent une couche de transparence qui permet à l'image de se fondre dans la vidéo. Nous recommandons tout particulièrement de réduire la taille des fichiers PNG à l'aide d'un service tel que TinyPNG

Les JPG fonctionnent tout aussi bien, bien sûr. Cependant, ils n'ont pas de couche de transparence, il faut donc les utiliser avec précaution.

Télécharger un fichier ou une URL ?

Nous vous recommandons de suivre votre flux de travail habituel. Si vous téléchargez habituellement des images pour votre site web ou d'autres contenus vers un système tiers comme Amazon S3 ou Wordpress, continuez à le faire. Si vous avez l'habitude de télécharger directement à partir de votre système, il vous suffit d'utiliser l'option "Télécharger un fichier".