The Video Player component

Insert a video into your interface, choose whether to display the player, customize its appearance, and associate actions with your video (play, specific time, stop, etc.).

The Video Player component allows you to integrate a video into your design, unlike the Fullscreen Video component, which automatically displays your video in full screen mode, above the interface. You can customize the player's appearance, choose whether to display it or not...

Importing the Video

Before inserting a video into your interface, you first need to import the video file into the Files window in Pandasuite. You can import various formats such as MP4, AVI, WMV, MOV, FLV, MKV, MPG, MPEG. If you want to use a video hosted on YouTube or Vimeo, opt for the URL Media Player component.

Inserting the Video Player

In your interface, click on Components and insert the Video Player. Choose your file as the Source in the properties.

Video Player Properties

Here are the different properties you can configure to customize the appearance and behavior of the video player:

• Source: Select the video file to play.
• Quality: Set the video playback quality (see below).
• High Precision Search: Enable this option to allow precise navigation within the video, especially for creating accurate markers. Note: This option affects the video size.
• Player Controls: Choose whether to display player buttons such as Play, Pause, Forward, Rewind, Full Screen, and the seek bar. These options help users better control the video.
• Autoplay: Enable this option for the video to start automatically when the user arrives at the interface.
• Loop: Enable this feature if you want the video to automatically repeat after playback.
• Volume: Set the default volume (1 being the initial volume of the video). You can also set a volume range, which is particularly useful if the video needs to be synchronized with other interactive elements.
• Speed: Set the default playback speed (1 being the normal speed). As with the volume, you can define a speed range for perfect synchronization with other elements.
• Default Time: Based on pre-defined markers, specify a precise starting point in the video (in seconds or minutes) for playback to begin at that moment when a user arrives at the interface. If this option is not set, the video will always start from the beginning.

Video Quality and Size

When using this component, your video will be stored inside your application and downloaded locally by your user. To optimize the size of your application, you can use online videos (YouTube, Vimeo) via the Url Media Player component. An internet connection will be required for the user.

You can change the quality and size of your video via the Quality setting. You can choose between SD (240p), SD (360p), MD (480p), HD Ready (720p), Full HD (1080p), or UHD 4K (2160p).

If your application contains many videos, you can also use the Partial Download component to allow users to download them gradually.

Modifying the Video's Appearance

When you insert a Video Player, it has a fixed ratio, and black bars may appear if this ratio does not match the original video. You can resize the player using layout options, especially by unchecking the lock icon.

It's not possible to resize the original video. A tip: transform your video into a Group and use mask options to change the ratio.

Thanks to markers, you can adjust the start and end time of the video.

Automatically Play a Video

To automatically start the playback, simply enable Autoplay in the component's properties.

Displaying a Video in a Pop-up

To display a video in a pop-up, simply integrate this component into a Pop-up. You can customize the background color, blur level, and the method to close the pop-up.

Triggering an Action from a Video

You can use the Video Player as an action trigger.

Select your component and open the Actions window.

Click the + button and choose one of these triggers:

• Start Playing
• Pause
• Stop Playing
• End Playing

Add an Action to a Video

Choose a trigger and the Act on a Component action. Select the Video Player.

Here is the list of available actions:

• Play/Pause
• Play
• Pause
• Stop
• Forward
• Rewind
• Restart from the Beginning
• Enter/Exit Fullscreen
• Set Volume
• Increase Volume
• Decrease Volume
• Set Speed
• Increase Speed
• Decrease Speed

Create Markers

If you want to trigger an action at a specific moment in the video or move your video to a certain point, you need to create markers.

To create a marker, go to the Properties window of the component and click on EDIT. Create a new marker from the Editing window.

Open the Actions window, select your component, and click on + ADD ACTION to find this

time in the list of triggers.

If you choose the Act on a Component action, you will have access to these new possibilities:

• Change Time
• Next Time
• Previous Time

Synchronize a Video with Another Component

You can synchronize your video with another component (Timer, Audio...) and choose to synchronize:

• Time
• Volume
• Speed
• Markers

These settings are accessible from the Properties window of the Synchronization component.