Ce composant n'est pas compatible avec les annonces Google Ads, Google AdMob, AMP HTML, vidéo ni illustrées.
Le composant "Vidéo" vous permet d'intégrer une vidéo à votre projet et d'y ajouter des fonctionnalités interactives.
Pour afficher une vidéo YouTube, utilisez plutôt le composant "YouTube".
Pour ajouter le composant "Vidéo" à votre projet, procédez comme suit :
- Ouvrez le panneau Composants, puis le dossier Média.
- Faites glisser le composant Vidéo
dans l'espace de création. Si vous créez une annonce, vous pouvez également utiliser l'option Fichier > Importer des éléments et ignorer l'étape suivante.
- Dans la section regroupant les propriétés du composant Vidéo du panneau Propriétés, saisissez l'URL du fichier source de la vidéo dans le champ Sources. Si le fichier source de la vidéo est enregistré en local, cliquez sur le bouton Parcourir
du champ afin de sélectionner la vidéo sur votre ordinateur.
- Pour rendre la vidéo interactive, vous pouvez ajouter des zones cliquables et des points de repère. Double-cliquez sur le composant "Vidéo" dans l'espace de création pour ouvrir la boîte de dialogue "Vidéo interactive".
- Les zones cliquables apparaissent sur le composant "Vidéo" à des moments précis.
- Les points de repère permettent de relier des événements à des moments précis de la lecture de la vidéo.
Vidéo dans les navigateurs pour mobile
La lecture automatique des vidéos peut être désactivée dans les navigateurs pour mobile afin d'éviter aux utilisateurs de devoir payer des frais de données pour un contenu qu'ils n'ont pas demandé. Avec ces navigateurs, il est recommandé de désactiver la lecture automatique et d'activer les commandes vidéo.
Dans le panneau "Propriétés", apportez les modifications suivantes :
- Décochez la case Lecture automatique.
- Cochez la case Afficher les commandes.
Boîte de dialogue "Vidéo interactive"
La boîte de dialogue "Vidéo interactive" vous permet de prévisualiser la vidéo, ainsi que de définir des zones cliquables et des points de repère. Elle comprend une timeline qui vous permet de voir où se situent les zones cliquables et points de repère dans la vidéo. Une zone cliquable n'est visible dans l'aperçu vidéo que si la tête de lecture se trouve entre les heures de début et de fin d'apparition de cette zone.
Commandes de la boîte de dialogue "Vidéo interactive"
Sous l'aperçu vidéo, les boutons suivants vous permettent de contrôler la lecture de la vidéo et la position de la tête de lecture :
| Revenir en arrière (à un point de repère, au début ou à la fin d'une zone cliquable, ou au début de la vidéo) | |
| Image précédente | |
| Lecture/Pause | |
| Image suivante | |
| Avancer (pour atteindre un point de repère, le début ou la fin d'une zone cliquable, ou la fin de la vidéo) |
Vous pouvez également modifier directement le temps de lecture de la vidéo en cliquant sur le temps en jaune et en saisissant une autre valeur en secondes.
Ajouter un point de repère
- Si la tête de lecture sur la timeline se trouve à l'endroit où vous voulez ajouter le point de repère, cliquez sur le bouton Créer un point de repère
sous la vidéo. Dans le cas contraire, faites un clic droit sur la timeline, puis sélectionnez Ajouter un point de repère dans le menu contextuel.
- Un repère
s'affiche au-dessus de la timeline de la vidéo.
- Vous pouvez modifier l'ID du point de repère dans le panneau "Propriétés" sur la droite, ou en faisant un clic droit sur le point de repère et en sélectionnant Modifier l'ID.
- Pour ajuster l'heure d'apparition du point de repère, faites glisser le repère le long de la timeline ou saisissez une autre valeur dans le panneau "Propriétés". Il doit s'écouler au moins une demi-seconde entre deux points de repère.
Après avoir fermé la boîte de dialogue, vous pouvez référencer le point de repère dans les événements et actions.
Supprimer un point de repère
Faites un clic droit sur le repère, puis sélectionnez Supprimer.
Ajouter une zone cliquable
- Placez la tête de lecture de la timeline à l'endroit où vous souhaitez ajouter une zone cliquable.
- Cliquez sur le bouton + Zone cliquable à gauche de la timeline de la vidéo. Une nouvelle piste des zones cliquables s'affiche sous la timeline.
- Dans le panneau "Propriétés" sur la droite, sélectionnez l'élément que vous souhaitez afficher en superposition.
- Ignorez cette étape si vous voulez que la zone cliquable soit transparente.
- Si vous utilisez un élément vidéo, la lecture de la vidéo débutera automatiquement sans commande lors de l'affichage de la zone cliquable.
- Ajustez la position, la taille et la durée de la zone cliquable.
- Par défaut, la zone cliquable s'affiche aussi longtemps que dure la vidéo, y compris avant et après la lecture.
- Vous pouvez apporter des modifications dans le panneau "Propriétés", ou faire glisser la zone cliquable, ses poignées de redimensionnement ou sa barre sur la timeline de la vidéo.
Pour réagir lorsqu'un utilisateur clique sur la zone cliquable, configurez l'événement Souris > click pour détecter le geste correspondant après la fermeture de la boîte de dialogue.
Les zones cliquables ne fonctionnent pas dans les vidéos en mode plein écran.
Supprimer une zone cliquable
Cliquez sur le X à côté de l'ID de la zone cliquable, à gauche de la timeline.
Propriétés
Propriétés du composant "Vidéo"
Les propriétés du composant "Vidéo" sont affichées dans le panneau "Propriétés". Vous devez quitter la boîte de dialogue "Vidéo interactive".
| Propriété | Description |
|---|---|
| Nom | Nom du composant. |
| Lecture automatique | Lorsque cette option est sélectionnée, votre vidéo est lue automatiquement lors du chargement de la page. La lecture automatique n'est pas compatible avec tous les navigateurs pour mobile. |
| Boucle | Lorsque cette option est sélectionnée, la vidéo est lue en continu. |
| Désactiver le son | Lorsque cette option est sélectionnée, la lecture de la vidéo commence sans le son. |
| Commandes | Lorsque cette option est sélectionnée, le lecteur vidéo présente une barre de commandes standard. |
| Sources | URL de la source vidéo. Pour inclure plusieurs sources dans différents formats, séparez les URL par des virgules. Cette propriété peut être associée à des données dynamiques. |
| Poster | URL de l'image poster à afficher jusqu'à ce que l'utilisateur lance la lecture ou une recherche de la vidéo. Cette propriété peut être associée à des données dynamiques. |
La boîte de dialogue "Vidéo interactive" vous permet de consulter et de modifier les propriétés des points de repère.
| Propriété | Description |
|---|---|
| ID | ID du point de repère. |
| Heure | Valeur, en secondes, qui indique quand le point de repère doit apparaître. Cette propriété peut être associée à des données dynamiques. |
La boîte de dialogue "Vidéo interactive" vous permet de consulter et de modifier les propriétés des zones cliquables.
| Propriété | Description |
|---|---|
| ID | ID de la zone cliquable. |
| Gauche | Position gauche de la zone cliquable, sous la forme d'un pourcentage de la largeur du composant "Vidéo". Cette propriété peut être associée à des données dynamiques. |
| Haut | Position supérieure de la zone cliquable, sous la forme d'un pourcentage de la hauteur du composant "Vidéo". Cette propriété peut être associée à des données dynamiques. |
| Largeur | Largeur de la zone cliquable, sous la forme d'un pourcentage de la largeur du composant "Vidéo". Cette propriété peut être associée à des données dynamiques. |
| Hauteur | Hauteur de la zone cliquable, sous la forme d'un pourcentage de la hauteur du composant "Vidéo". Cette propriété peut être associée à des données dynamiques. |
| Heure d'affichage | Valeur, en secondes, qui indique quand la zone cliquable est visible. Non applicable si l'option Afficher avant la lecture est sélectionnée. Cette propriété peut être associée à des données dynamiques. |
| Afficher avant la lecture | Indique si la zone cliquable est affichée avant le début de la lecture de la vidéo. |
| Heure de masquage | Valeur, en secondes, qui indique quand la zone cliquable n'est plus visible. Non applicable si l'option Afficher après la lecture est sélectionnée. Cette propriété peut être associée à des données dynamiques. |
| Afficher après la lecture | Indique si la zone cliquable reste affichée une fois la lecture de la vidéo terminée. |
| Élément | Image, vidéo ou groupe à afficher en superposition. Cette propriété peut être associée à des données dynamiques. |
| Échelle | Dans le cas où l'élément est une image, il s'agit de la méthode de mise à l'échelle à utiliser si les dimensions de la zone cliquable et de l'élément diffèrent :
|
Événements et actions
Découvrez comment configurer des événements.
Événements
Événements envoyés par le composant "Vidéo"Vous pouvez déclencher d'autres actions en fonction des événements suivants du composant "Vidéo" :
| Événement | Description |
|---|---|
| Lire après une pause | Envoyé lorsque la lecture des éléments multimédias reprend après une mise en pause. |
| Mis en pause | Envoyé lorsque la lecture est mise en pause. |
| En cours de lecture | Envoyé au début de la lecture d'un élément multimédia (soit lors de la première lecture, soit lors d'une reprise après une mise en pause ou après une lecture complète). |
| Terminé | Envoyé à la fin de la lecture. |
| Modification du volume | Envoyé lorsque le volume sonore est modifié (soit en réglant le volume, soit en utilisant l'attribut de désactivation du son). |
| Cherché | Envoyé à la fin d'une opération de recherche. |
| Mise en mémoire tampon | Envoyé lorsque l'opération demandée (une lecture, par exemple) est différée en attendant la fin d'une autre (telle qu'une recherche). |
Pour sélectionner l'un de ces événements dans la boîte de dialogue Événement, définissez le composant "Vidéo" en tant que cible.
Si vous ajoutez un point de repère à une vidéo, vous pouvez déclencher d'autres actions en fonction de l'événement suivant :
| Événement | Description |
|---|---|
| Point de repère atteint | Envoyé lorsque la lecture du contenu multimédia a atteint une durée définie dans un point de repère. |
Pour sélectionner cet événement dans la boîte de dialogue Événement, définissez le point de repère en tant que cible.
Si vous ajoutez une zone cliquable à une vidéo, vous pouvez déclencher d'autres actions en fonction des événements suivants :
| Événement | Description |
|---|---|
| Zone cliquable affichée | Envoyé lorsque la zone cliquable est visible. |
| Zone cliquable masquée | Envoyé lorsque la zone cliquable est masquée. |
Pour sélectionner l'un de ces événements dans la boîte de dialogue Événement, définissez la zone cliquable en tant que cible.
Actions
Actions effectuées par le composant "Vidéo"Les actions suivantes du composant "Vidéo" peuvent être déclenchées en réponse à d'autres événements :
| Action | Options de configuration |
|---|---|
| Activer/Couper le son | Aucune |
| Mettre en pause | Aucune |
| Lire | Aucune |
| Nouvelle lecture | Aucune |
| Chercher | Heure : point de la vidéo à atteindre (en secondes). |
| Régler le volume | Régler le volume (0-100) : volume de la vidéo, en pourcentage. |
| Définir les sources | Sources : URL sources de différents formats, séparées par des virgules. |
Lorsque vous sélectionnez l'une de ces actions dans la boîte de dialogue Événement, définissez le composant "Vidéo" en tant que destinataire.
Si vous ajoutez un point de repère à une vidéo, les actions suivantes peuvent être déclenchées en réponse à d'autres événements :
| Action | Options de configuration |
|---|---|
| Rechercher un point de repère | Aucune |
| Définir l'heure d'apparition du point de repère | Heure : position, en secondes. |
Lorsque vous sélectionnez l'une de ces actions dans la boîte de dialogue Événement, définissez le point de repère en tant que destinataire.
Si vous ajoutez une zone cliquable à une vidéo, les actions suivantes peuvent être déclenchées en réponse à d'autres événements :
| Action | Options de configuration |
|---|---|
| Modifier la visibilité | Afficher la zone cliquable : rendez la zone cliquable visible. Décochez cette case pour masquer la zone cliquable. |
| Chercher l'heure d'affichage ou de masquage | Rechercher l'heure d'affichage : recherchez l'heure d'affichage de la zone cliquable. Décochez cette case pour rechercher l'heure de masquage de la zone cliquable. Cette action convient particulièrement aux zones cliquables qui s'affichent avant ou après la lecture, puisque l'effet pendant la lecture n'est que momentané. |
| Définir les heures |
|
Lorsque vous sélectionnez l'une de ces actions dans la boîte de dialogue Événement, définissez la zone cliquable en tant que destinataire.
Aperçu
Vous pouvez prévisualiser la vidéo dans la boîte de dialogue "Vidéo interactive" en double-cliquant sur le composant "Vidéo" dans l'espace de création. L'aperçu dans la boîte de dialogue ne permet pas d'afficher entièrement les zones cliquables incluant une animation.
Pour prévisualiser le composant avec d'autres éléments de votre document ou pour tester des événements, quittez la boîte de dialogue "Vidéo interactive", puis cliquez sur le bouton Aperçu dans l'angle supérieur droit.