Lecteur vidéo

Insérez une vidéo dans votre interface, personnalisez l'apparence et associez des actions à votre vidéo.

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 comme une pop-up plein écran. Vous pouvez personnaliser l'apparence du lecteur, l'afficher ou non...

Pour insérer une vidéo, importez d'abord le fichier vidéo dans la fenêtre Fichiers. Vous pouvez importer n'importe quel type de format : MP4, AVI, WMV, MOV, FLV, MKV, MPG, MPEG.  Pour insérer une vidéo YouTube ou Vimeo, utilisez le composant URL Media Player.

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

Voici quelques-unes des propriétés :

• Contrôles du lecteur : choisissez d'afficher ou non les boutons Lecture, Pause, Avancer, Reculer, Plein Ecran et déplacer la tête de lecture
• En boucle : activez ou non la lecture en boucle
• Volume : choisissez le volume par défaut (1 étant le volume initial de la vidéo) et la plage de volume dans le cadre d'une synchronisation.
• Vitesse : choisissez la vitesse par défaut (1 étant la vitesse initiale de la vidéo) et la plage de vitesse dans le cadre d'une synchronisation.
• Temps par défaut : pour sélectionner le temps qui sera affiché au chargement de l’état (sur la base des marqueurs prédéfinis). Si vous ne définissez rien et que vous retournez sur cet écran, vous retomberez au début de votre vidéo.    

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 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 en 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.

Agir sur 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

Vous pouvez également créer une action sur votre vidéo.

Choisissez un déclencheur et l'action  Agir sur un composant. 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

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.