Création de prototypes avec des vidéos

Vous pouvez choisir une option de lecture prédéfinie ou personnalisée pour votre vidéo, puis définir le fonctionnement des autres interactions avec celle-ci. Pour découvrir les différentes options de lecture vidéo et les interactions possibles, rien de tel que d’observer quelques exemples de prototypes réalistes impliquant des vidéos.

Avant de commencer

Apprenez à importer des vidéos et à ajuster les paramètres.

Définition d’une option de lecture

Options de lecture et interactions associées

Lorsque vous définissez une option de lecture pour votre vidéo en mode Design, les interactions associées sont automatiquement définies en mode Prototype.

Appuyer pour lire

Si vous choisissez l’option Appuyer pour lire, le déclencheur Appuyer est défini automatiquement avec l’action par défaut Bouton Lecture/Pause.

Lire automatiquement

Si vous choisissez l’option Lire automatiquement, le déclencheur Délai est défini automatiquement avec un délai de 0 seconde.

Pas de lecture

Si vous choisissez l’option Pas de lecture, aucune interaction n’est créée en mode Prototype.

Personnalisation de la lecture vidéo

En mode Prototype, optez pour l’une des personnalisations suivantes :

 Vous ne pouvez pas paramétrer une vidéo de manière à ce qu’un déclencheur Faire glisser entraîne sa lecture.

Utilisation de la lecture vidéo avec d’autres interactions

Détails des interactions et du comportement de lecture des vidéos 

La lecture de la vidéo s’arrête ou continue en fonction des interactions que vous avez définies pour d’autres objets :

• La lecture de la vidéo s’arrête lorsque des actions autres que Lecture Lottie et Animation automatique sont déclenchées.
• Si vous souhaitez que la lecture de la vidéo continue lorsque vous survolez ou appuyez sur d’autres objets, utilisez l’option Animation automatique comme action pour les déclencheurs Survoler et Appuyer.

Déclencheurs Vidéo et Délai

Pour n’importe quel plan de travail :

• Vous pouvez ajouter plusieurs déclencheurs Délai successifs en fonction du délai défini pour chacun.
• Vous pouvez configurer une vidéo et plusieurs animations Lottie pour les lancer ensemble à la fin du même délai. Vous pouvez également définir une lecture automatique en choisissant un délai de 0 s.
• Si vous définissez des déclencheurs Délai avec le même délai sur le plan de travail, la vidéo et les animations Lottie, la priorité est : plan de travail > vidéo > animations Lottie.

Exemples de prototypage

Maintenant que vous avez appris à définir une option de lecture pour votre vidéo et à la relier à d’autres interactions, testons ensemble quelques exemples.

Exemple 1 : prototyper le bouton d’agrandissement d’une vidéo

Apprenez à prototyper le bouton d’agrandissement d’une vidéo.

Ex 1-artboard 1

1. En mode Design, importez la vidéo Tip 1 et placez-la sur le plan de travail. Définissez l’option Appuyer pour lire.
2. Placez l’icône Agrandir (disponible dans la section Icônes à droite des plans de travail) dans le coin inférieur droit de la vidéo. 
3. En mode Prototype, reliez l’icône Agrandir à Ex 1-artboard 2 et définissez-la avec un déclencheur Appuyer et le type d’action Animation automatique.

Ex 1-artboard 2

1. En mode Design, importez la vidéo Tip 1 et placez-la sur le plan de travail (vidéo en plein écran). Définissez l’option Appuyer pour lire.
   
2. Placez l’icône Réduire (disponible dans la section Icônes à droite des plans de travail) dans le coin inférieur droit de la vidéo. 
3. En mode Prototype, reliez l’icône Réduire à Ex 1-artboard 1 et définissez-la avec un déclencheur Appuyer et le type d’action Animation automatique.
   

Une fois que vous avez fini de relier les interactions, prévisualisez le prototype et vérifiez les interactions.

Exemple 2 : prototyper la lecture

Découvrez comment lire plusieurs vidéos d’affilée dans XD.

Ex 2-artboard 1

1. En mode Design, importez la vidéo Intro et placez-la dans la section Introduction. Définissez l’option Pas de lecture.
   
2. Importez les vidéos Tip 1 et Tip 2 et placez-les dans la section Conseils. Définissez l’option Pas de lecture.
3. Placez une copie du bouton Lecture (disponible dans la section Icônes) sur toutes les vidéos.
4. En mode Prototype :

• Reliez le bouton Lecture de la vidéo Intro à Ex 2-artboard 2.
  
•  Reliez le bouton Lecture de la vidéo Tip 1 à Ex 2-artboard 3.
  
• Reliez le bouton Lecture de la vidéo Tip 2 à Ex 2-artboard 4. 

Définissez tous ces éléments avec un déclencheur Appuyer et le type d’action Transition.

Ex 2-artboard 2

1. En mode Design, importez la vidéo Intro et placez-la au-dessus de la section Conseils. Définissez l’option Lire automatiquement.
2. En mode Prototype, reliez la vidéo à Ex 2-artboard 3 et définissez-la avec un déclencheur Fin de lecture et le type d’action Transition.
   

Ex 2-artboard 3

1. En mode Design, importez la vidéo Tip 1 et placez-la au-dessus de la section Tip 1. Définissez l’option Lire automatiquement.
   
2. En mode Prototype, reliez la vidéo à Ex 2-artboard 4 et définissez-la avec un déclencheur Fin de lecture et le type d’action Transition.
   

Ex 2-artboard 4

1. En mode Design, importez la vidéo Tip 2 et placez-la au-dessus de la section Tip 2. Définissez l’option Lire automatiquement.
2. En mode Prototype, reliez la vidéo à Ex 2-artboard 1 et définissez-la avec un déclencheur Fin de lecture et le type d’action Transition.
   

Une fois que vous avez fini de relier les interactions, prévisualisez le prototype et vérifiez les interactions.

Plus d’exemples

Découvrez d’autres exemples avec des vidéos, des animations Lottie et des états de composants.

Plus d’exemples

En savoir plus

Regardez cette vidéo de 2 minutes pour découvrir quelques conseils de pro concernant l’utilisation des vidéos dans XD.

Ressources associées

• Création de prototypes interactifs
  
• Création de prototypes à l’aide de la lecture et des commandes vocales
  
• Utilisation d’animations Lottie

Vous avez une question ou une suggestion ?