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'un texte superposé
Les incrustations de texte sont utilisées pour afficher du texte 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, le texte superposé apparaît au point 75 % de la vidéo et reste affiché 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 incrustation de texte à un projet :
- Connectez-vous à Brightcove Interactivity Studio(https://www.hapyak.com/login).
- Dans la navigation de gauche, cliquez sur Gérer.
- Cliquez sur un projet pour l'ouvrir.
- Dans la barre d'outils inférieure, cliquez sur le bouton de superposition de texte.
- Cliquez sur le lien Éditeur dans le menu.
- Saisissez le texte de l'incrustation et cliquez sur Soumettre.
- Cliquez et faites glisser l'incrustation à l'endroit où vous souhaitez qu'elle apparaisse sur la vidéo.
- Cliquez sur le menu Heure de démarrage .
- 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.
- Cliquez sur l'icône de l'horloge pour définir la durée de la superposition. Cliquez sur SOUMETTRE.
- Cliquez sur le menu Lien .
- Saisissez une URL à laquelle vous serez redirigé lorsque vous cliquerez sur l'image superposée.
- (Facultatif) Cliquez sur l'onglet COMPORTEMENT et demandez à la vidéo de s' interrompre au clic de la vidéo. Cliquez sur SOUMETTRE.
- Cliquez sur Done.
Publiez la vidéo à l'aide du module médias et confirmez l'apparition de la superposition.
Des astuces
Par défaut, le texte est aligné au centre et la taille de la boîte qui l'entoure s'ajuste au fur et à mesure que vous tapez. Il est également possible d'aligner le texte à gauche ou à droite. Suivez ces étapes :
- Copiez l'URL dans ce fichier CSS :
https://interactivity.support.brightcove.com/assets/css/hapyak-css-text-align.css - Modifiez le projet et cliquez sur .
- Collez l'URL dans le champ Custom Annotation CSS (URL) .
- Cliquez sur .
L'alignement par défaut est alors à gauche. Pour définir une annotation spécifique sur l'alignement à droite ou au centre, sur l'annotation, cliquez sur Modifier > Plus... > Ajouter une classe puis tapez texte à droite ou centre de texte dans le Des classes champ.