Aller au contenu
PandaSuite Docs

URL Media Player

Le composant URL Media Player de PandaSuite vous permet d’intégrer et de contrôler des contenus multimédias hébergés sur des plateformes externes comme YouTube, Vimeo…

Comme tout composant multimédia (Lecteur Vidéo, Audio..), vous pouvez créer des marqueurs et ajouter des interactions au contenu multimédia, afficher ou masquer les contrôles du lecteur.

url_media_player_example.png

Étant donné que ces contenus vidéo et audio sont en ligne, l’utilisateur aura besoin d’une connexion Internet pour les afficher dans son interface.

Dailymotion n’est actuellement pas pris en charge par le composant : pour afficher une vidéo Dailymotion, veuillez utiliser le composant Web avec l’URL d’intégration de la vidéo.

Ajouter un Url Media Player

Cliquez sur l’icône Composants et ajoutez le composant URL Media Player.

add_url_media_player.png

Dans les propriétés, insérez l’ URL de la vidéo ou de l’audio : il s’agit de l’URL de la page où se trouve le média.

url_video_youtube.png

Personnalisez les propriétés du composant :

  • Lecture automatique : le média démarre dès que le composant est visible.
  • Boucle : redémarre automatiquement le média une fois terminé.
  • Contrôles du lecteur : affiche ou masque les boutons de lecture (lecture, pause, volume…).

Associer des actions interactives

Le composant peut déclencher et être contrôlé via des actions interactives.

Déclencher une action à partir du composant Url Media Player

Sélectionnez le composant URL Media Player et allez dans l’onglet Actions

Cliquez sur le bouton + et choisissez parmi les déclencheurs disponibles:

  • Fin de la lecture
  • Pause
  • Démarrer la lecture
  • Temps (le marqueur)

Ajoutez l’action de votre choix.

url_media_player_actions.png

Agir sur le composant Url Media Player

Choisissez un objet, le déclencheur et l’action Agir sur un composant.

Voici les actions disponibles :

  • Changer de moment
  • Augmenter/diminuer la vitesse
  • Avancer/Reculer
  • Pause
  • Lire
  • Pause
  • Redémarrer depuis le début
  • Définir la vitesse
  • Arrêter
  • Aller à
url_media_player_act.png

Synchroniser avec un autre composant

Pour synchroniser votre composant avec un autre (par exemple la zone de défilement), insérez le composant Synchronisation depuis Composants.

Dans la fenêtre Propriétés, cliquez sur Ajouter un composant. Choisissez le URL Media Player et un autre composant dans la liste. Sélectionnez le composant et cliquez sur Synchroniser le temps dans les options.

Ajouter des marqueurs

Les marqueurs vous permettent de définir un moment clé de la vidéo ou de l’audio auquel vous associerez une action : un déclencheur ou une action.

Pour ajouter des marqueurs à votre vidéo / audio:

  • Double-cliquez sur le composant.
  • Dans la fenêtre de gauche, utilisez le lecteur pour positionner le fichier au bon moment.
  • Cliquez sur le bouton + pour ajouter un marqueur
markeur_ajout.png

Données exposées par le composant

Le composant URL Media Player fournit des données en temps réel qui peuvent être utilisées dans votre projet. Ces données permettent d’interagir de manière dynamique avec d’autres éléments de votre projet.

Les données disponibles sont :

  • Durée totale : la durée complète du média, exprimée en secondes.
  • Valeur actuelle : le temps écoulé ou le moment actuel de la lecture.
  • État : si le média est en cours de lecture ou non (retourne “lecture” ou “pause”).

Exemple d’utilisation :

  • Affichez la progression du média grâce à une barre de chargement dynamique.
  • Activez un bouton “Suivant” uniquement lorsque la vidéo est terminée (via une condition sur l’état du composant).
  • Synchronisez des effets visuels avec le contenu audio/vidéo (par exemple, à des moments spécifiques de la lecture).