Lecteur vidéo

Le composant Lecteur vidéo permet d’intégrer des vidéos directement dans votre interface, avec la possibilité de personnaliser l’apparence du lecteur et d’associer diverses actions à la vidéo, telles que la lecture, la mise en pause ou le saut à un instant précis.

Cas d’usage

Ce composant est idéal pour afficher des vidéos au sein de votre design sans imposer un mode plein écran, contrairement au composant Vidéo plein écran qui lance automatiquement la vidéo en plein écran au-dessus de l’interface.

Voici quelques exemples d’utilisation :

Vidéo en arrière-plan : utilisez une vidéo en arrière-plan pour dynamiser votre interface. Désactivez les contrôles, activez la lecture automatique et la boucle pour un effet fluide et immersif.
Vidéo dans une pop-up : affichez une vidéo dans une pop-up pour mettre en avant un contenu spécifique, comme un tutoriel ou une démonstration.
Vidéo interactive : associez des marqueurs ou des déclencheurs à votre vidéo pour permettre des interactions, comme afficher des informations ou naviguer dans le contenu.

Mise en place du composant

Avant d’insérer une vidéo, importez le fichier vidéo dans la fenêtre Fichiers de PandaSuite. Les formats acceptés incluent MP4, AVI, WMV, MOV, FLV, MKV, MPG et MPEG. Pour des vidéos hébergées sur YouTube ou Vimeo, il est nécessaire d’utiliser le composant URL Media Player.

Pour ajouter le Lecteur vidéo à votre projet, cliquez sur Composants dans l’interface, puis insérez le Lecteur vidéo. Dans les propriétés, sélectionnez le fichier vidéo souhaité comme source.

Le composant Lecteur vidéo stocke la vidéo à l’intérieur de l’application, la rendant disponible hors ligne pour l’utilisateur. Cependant, pour optimiser le poids de l’application, il est possible d’utiliser des vidéos en ligne via le composant URL Media Player, ce qui nécessite une connexion Internet pour l’utilisateur. La qualité de la vidéo peut être ajustée pour équilibrer la qualité visuelle et le poids du fichier.

Lors de l’insertion d’un Lecteur vidéo, le ratio est fixe, ce qui peut entraîner l’apparition de bandes noires si le ratio ne correspond pas à celui de la vidéo d’origine. Il est possible de redimensionner la taille du lecteur en utilisant les options de mise en page et en décochant le cadenas. Une astuce consiste à transformer la vidéo en Groupe et à utiliser les options de masque pour modifier le ratio.

Caractéristiques du composant

Propriétés

Le Lecteur vidéo offre plusieurs propriétés pour personnaliser son apparence et son comportement :

Source : Sélection du fichier vidéo à lire.
Qualité : Choix de la qualité de lecture (SD, MD, HD Ready, Full HD, UHD 4K).
Recherche de haute précision : Permet une navigation précise dans la vidéo, utile pour la création de marqueurs précis. (Notez que cette option peut augmenter le poids de la vidéo)
Contrôles du lecteur : Possibilité d’afficher ou non les boutons tels que Lecture, Pause, Avancer, Reculer, Plein Écran et le curseur de la tête de lecture.
Lecture automatique : Démarrage automatique de la vidéo à l’arrivée de l’utilisateur sur l’interface.
En boucle : Répétition automatique de la vidéo après sa lecture.
Volume : Configuration du volume par défaut (1 correspondant au volume initial de la vidéo).
Vitesse : Définition de la vitesse de lecture par défaut (1 étant la vitesse normale).
Temps par défaut : Spécification d’un point de départ précis dans la vidéo basé sur des marqueurs prédéfinis.

Pour lancer automatiquement une vidéo, activez l’option “Lecture automatique” dans les propriétés du composant. Cependant, il est important de noter que de nombreux navigateurs web, tels que Firefox et Chrome, bloquent la lecture automatique des vidéos sans interaction utilisateur préalable.

Pour afficher une vidéo dans une pop-up, intégrez le composant Lecteur vidéo au sein d’une Pop-up. Vous pouvez personnaliser la couleur de fond, le niveau de flou et les options de fermeture de la pop-up.

Événements déclencheurs

Le Lecteur vidéo peut également servir de déclencheur pour diverses actions. Les déclencheurs disponibles incluent :

Commence lecture
Mise en pause
Arrêt lecture
Fin lecture

Actions interactives

Les actions associées au Lecteur vidéo comprennent :

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

Interactions avancées

Marqueurs

Il est possible de créer des marqueurs pour déclencher des actions à des instants précis de la vidéo ou pour déplacer la lecture à un moment spécifique. Pour créer un marqueur, accédez à la fenêtre Propriétés du composant et cliquez sur “Éditer”. Une fois les marqueurs créés, ils peuvent être utilisés comme déclencheurs dans la fenêtre Actions.

Synchronisation

La synchronisation du Lecteur vidéo avec d’autres composants, tels que le Minuteur ou l’Audio, est également possible. Les paramètres de synchronisation disponibles incluent :

Temps
Volume
Vitesse
Marqueurs

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

Bonnes pratiques et astuces

Vidéo transparente

Le composant Lecteur Vidéo ne permet pas d’intégrer des vidéos avec un fond transparent, à cause des limitations techniques des formats vidéo courants (comme MP4 ou AVI). Si vous souhaitez inclure une animation ou une vidéo avec un fond transparent, voici deux alternatives possibles :

Séquence d’images : Utilisez une séquence d’images exportée depuis votre logiciel d’animation (comme After Effects). Ce format vous permet d’afficher une animation tout en conservant la transparence. Importez les images dans PandaSuite et configurez-les comme une animation.
Animation Lottie : Si votre animation a été créée dans un outil compatible avec le format Lottie, cette option est idéale. Lottie est un format d’animation vectorielle léger qui prend en charge la transparence et s’intègre parfaitement dans PandaSuite grâce au composant Animation Lottie.