Le composant Lecteur vidéo

Insérez une vidéo au sein de votre interface, affichez ou non le lecteur, personnalisez son apparence et associez des actions à votre vidéo (lecture, temps précis, arrêt...).

Le composant Lecteur vidéo permet d'intégrer une vidéo au sein de votre design, contrairement au composant Vidéo plein écran qui affiche votre vidéo automatiquement en plein écran, au-dessus de l'interface. Vous pouvez personnaliser l'apparence du lecteur, l'afficher ou non...

Import de la vidéo 

Avant d'insérer une vidéo dans votre interface, vous devez d'abord importer le fichier vidéo dans la fenêtre Fichiers de Pandasuite. Vous pouvez importer divers formats tels que MP4, AVI, WMV, MOV, FLV, MKV, MPG, MPEG. Si vous souhaitez utiliser une vidéo hébergée sur YouTube ou Vimeo, optez pour le composant URL Media Player.

Insertion du Lecteur Vidéo 

Dans votre interface, cliquez sur  Composants et insérez le Lecteur vidéo. Choisissez votre fichier comme Source dans les propriétés.

Propriétés du Lecteur vidéo 

Voici les différentes propriétés que vous pouvez configurer pour personnaliser l'apparence et le comportement du lecteur vidéo :

• Source : sélectionnez le fichier vidéo à lire.
• Qualité : déterminez la qualité de lecture de la vidéo (voir ci-dessous) 
  
• Recherche de haute précision : activez cette option pour permettre une navigation précise dans la vidéo, notamment pour la création de marqueurs précis. Attention : cette option impacte le poids de la vidéo
• Contrôles du lecteur : vous pouvez choisir d'afficher ou non les boutons du lecteur à savoir Lecture, Pause, Avancer, Reculer, Plein Écran, et le curseur de la tête de lecture. Ces options sont utiles pour offrir une meilleure maîtrise de la vidéo à vos utilisateurs.
• Lecture automatique : activez cette option pour que la vidéo démarre automatiquement dès que l'utilisateur arrive sur l'interface.
• En boucle : activez cette fonctionnalité si vous souhaitez que la vidéo se répète automatiquement après sa lecture.
• Volume : configurez le volume par défaut (1 étant le volume initial de la vidéo). Vous pouvez également définir une plage de volume, ce qui est particulièrement utile si la vidéo doit être synchronisée avec d'autres éléments interactifs.
• Vitesse : définissez la vitesse de lecture par défaut de la vidéo (1 étant la vitesse normale). Comme pour le volume, vous pouvez définir une plage de vitesse pour une synchronisation parfaite avec d'autres éléments
• Temps par défaut :  sur la base des marqueurs pré-définis, spécifiez un point de départ précis dans la vidéo (en secondes ou en minutes) pour que la lecture commence à ce moment-là lorsqu'un utilisateur arrive sur l'interface. Si cette option n'est pas configurée, la vidéo commencera toujours au début.

Qualité et poids de la vidéo

En utilisant ce composant, votre vidéo sera stockée à l'intérieur de votre application et téléchargée localement par votre utilisateur. Pour optimiser le poids de votre application, vous pouvez utiliser des vidéos en ligne (YouTube, Vimeo) via le composant Url Media Player. Une connexion Internet sera requise pour l'utilisateur.

Vous avez la possibilité de changer la qualité de votre vidéo et son poids via la Qualité. Vous avez le choix entre : SD (240p), SD (360p), MD (480p), HD Ready (720p), Full HD (1080p) ou UHD 4K (2160p).

Si votre application comporte de nombreuses vidéos, vous pouvez également utiliser le composant Téléchargement partiel pour permettre à l'utilisateur de les télécharger au fur et à mesure. 

Modifier l'aspect d'une vidéo 

Lorsque vous insérez un Lecteur vidéo, celui-ci a un ratio fixe et des bandes noires peuvent apparaître si ce ratio ne correspond pas à la vidéo d'origine. Vous pouvez redimensionner la taille du lecteur à l'aide des options de mise en page et notamment en décochant le cadenas. 

Il n'est pas possible de redimensionner la vidéo d'origine. Une astuce : transformez votre vidéo en Groupe et utiliser les options de masque pour modifier le ratio.

Grâce aux marqueurs, vous avez la possibilité de modifier le temps de début et de fin de la vidéo.

Lancer automatiquement une vidéo 

Pour lancer automatiquement la lecture, il suffit d'activer la Lecture automatique depuis les propriétés du composant.

Afficher une vidéo dans une pop-up

Pour afficher une vidéo en pop-up, il suffit d'intégrer ce composant au sein d'une Pop-up. Vous pouvez personnaliser la couleur de fond, le niveau de flou, le moyen de fermer la pop-up.

Déclencher une action depuis une vidéo

Vous pouvez utiliser le Lecteur vidéo comme déclencheur d'une action. 

Sélectionnez votre composant et ouvrez la fenêtre  Actions. 

Cliquez sur le bouton   +  et choisissez l'un de ces déclencheurs :

• Commence lecture
• Mise en pause
• Arrêt lecture
• Fin lecture

Ajouter une action sur une vidéo.

Choisissez un déclencheur et l'action  Agir sur un composant. Sélectionnez le Lecteur Vidéo.

Voici la liste des actions disponibles :

• Lecture/Pause
• Lecture
• Mettre en pause
• Arrêter
• Avancer
• Reculer
• Redémarrer au début
• Mettre/Enlever plein écran
• Mettre le volume
• Augmenter le volume
• Diminuer la vitesse
• Mettre la vitesse
• Augmenter la vitesse
• Diminuer la vitesse

Créer des marqueurs

Si vous souhaitez déclencher une action à un instant t de la vidéo ou déplacer votre vidéo jusqu'au moment y, vous devez créer des marqueurs.

Pour créer un marqueur, rendez-vous dans la fenêtre  Propriétés du composant et cliquez sur EDITER. Créez un nouveau marqueur depuis la fenêtre Edition.

Ouvrez la fenêtre  Actions, sélectionnez votre composant et cliquez sur + AJOUTER ACTION pour retrouver ce temps dans la liste des déclencheurs.

Si vous choisissez l'action  Agir sur un composant, vous aurez accès à ces nouvelles possibilités :

• Changer temps
• Temps suivant
• Temps précédent

Synchroniser une vidéo avec un autre composant

Vous pouvez synchroniser votre vidéo avec un autre composant (Minuteur, Audio...) et choisir de synchroniser :

• Temps
• Volume
• Vitesse
• Marqueurs

Ces paramètres sont accessibles depuis la fenêtre  Propriétés du composant Synchronisation.