The URL Media Player component

The PandaSuite URL Media Player component allows you to integrate and control multimedia content hosted on external platforms like YouTube, Vimeo...

Like any multimedia component (Video Player, Audio Player...), you can create markers, add interactions to the multimedia content, and show or hide the player controls.

Add a URL Media Player

Click on the Components icon and add the URL Media Player component.

In the properties, insert the URL of the video or audio: this is the URL of the page where the media is hosted.

Customize the component properties:

• Autoplay: the media starts playing as soon as the component is visible.
• Loop: the media automatically restarts when finished.
• Player Controls: show or hide playback buttons (play, pause, volume...).

Link Interactive Actions

The component can trigger and be controlled via interactive actions.

Trigger an Action from the URL Media Player Component

Select the URL Media Player component and go to the Actions tab.

Click the + button and choose from the available triggers:

• End of Playback
• Pause
• Start Playback
• Time (the marker)

Add the action of your choice.

Act on the URL Media Player Component

Select an object, the trigger, and the action Act on a Component.

Available actions:

• Change Moment
• Increase/Decrease Speed
• Forward/Backward
• Pause
• Play
• Restart from Beginning
• Set Speed
• Stop
• Go To

Sync with Another Component

To synchronize your component with another (e.g., a scrolling area), insert the Synchronization component from Components.

In the Properties window, click Add a Component. Choose the URL Media Player and another component from the list. Select the component and click Sync Time in the options.

Add Markers

Markers allow you to define a key moment in the video or audio where you associate an action: a trigger or another action.

To add markers to your video/audio:

• Double-click the component.
• In the left-hand window, use the player to position the file at the desired moment.
• Click the + button to add a marker.

Data Exposed by the Component

The URL Media Player component provides real-time data that can be used in your project. This data allows dynamic interactions with other elements of your project.

Available data:

• Total Duration: the full duration of the media, expressed in seconds.
• Current Value: the elapsed time or current playback position.
• State: whether the media is currently playing or paused (returns "playing" or "paused").

Example uses:

• Display media progress with a dynamic progress bar.
• Enable a “Next” button only when the video is finished (using a condition based on the component state).
• Sync visual effects with audio/video content (e.g., at specific playback moments).