The Video Player component

The Video Player component allows you to integrate videos directly into your interface, with the ability to customize the player's appearance and associate various actions with the video, such as play, pause, or jumping to a specific point.

Example of a video player within a Pop-up

Use cases

This component is ideal for displaying videos within your design without imposing a full-screen mode, unlike the Full Screen Video component, which automatically launches the video in full-screen mode over the interface.

Here are some examples of usage:

Background video: Use a video as a background to enhance your interface. Disable controls, enable autoplay, and loop for a smooth and immersive effect.
Video in a pop-up: Display a video in a pop-up to highlight specific content, such as a tutorial or demonstration.
Interactive video: Link markers or triggers to your video to enable interactions, such as displaying information or navigating through content.

Setting up the component

Before inserting a video, import the video file into the PandaSuite Files window. Accepted formats include MP4, AVI, WMV, MOV, FLV, MKV, MPG, and MPEG. For videos hosted on YouTube or Vimeo, you must use the URL Media Player component.

To add the Video Player to your project, click on Components in the interface, then insert the Video Player. In the properties, select the desired video file as the source.

The Video Player component stores the video within the application, making it available offline for the user. However, to optimize the application's size, you can use online videos through the URL Media Player, which requires an internet connection. Video quality can be adjusted to balance visual quality and file size.

When inserting a Video Player, the ratio is fixed, which may result in black bars if the ratio does not match the original video. You can resize the player using layout options and by unlocking the lock icon. A useful tip is to transform the video into a Group and use masking options to modify the ratio.

Component Features

Properties

The Video Player offers several properties to customize its appearance and behavior:

Source: Select the video file to play.

Quality: Choose the playback quality (SD, MD, HD Ready, Full HD, UHD 4K).

High precision seeking (HPS): Enables precise navigation in the video, useful for creating specific markers. (Note: This option may increase the video's size ⚠️)

Player controls: Option to display or hide buttons such as Play, Pause, Forward, Rewind, Full Screen, and the playback slider.

Auto play: Automatically starts the video when the user enters the interface.

Loop: Automatically repeats the video after playback.

Volume: Default volume setting (1 corresponds to the video's initial volume).

Speed: Set the default playback speed (1 equals normal speed).

Default time: Specify a precise starting point in the video based on predefined markers.

To automatically play a video, enable the "Auto Play" option in the component's properties. However, note that many web browsers, such as Firefox and Chrome, block autoplay without prior user interaction.

To display a video in a pop-up, integrate the Video Player component within a Pop-up. You can customize the background color, blur level, and close options of the pop-up.

Trigger Events

The Video Player can also act as a trigger for various actions. Available triggers include:

Start Playing

Pause

Stop Playing

End Playing

Interactive Actions

Actions associated with the Video Player include:

Play/Pause

Play

Pause

Stop

Forward

Rewind

Restart

Enter/Exit Full Screen

Set Volume

Increase Volume

Decrease Speed

Set Speed

Increase Speed

Decrease Speed

Advanced Interactions

Markers

It is possible to create markers to trigger actions at specific points in the video or to move the playback to a specific moment. To create a marker, go to the component's Properties window and click "Edit." Once markers are created, they can be used as triggers in the Actions window.

Synchronization

The Video Player can also be synchronized with other components, such as the Timer or Audio. Available synchronization parameters include:

Time
Volume
Speed
Markers

These parameters are accessible from the component's Properties window in the Synchronization section.

Best practices and tips

The Video Player component does not allow for integrating videos with a transparent background due to technical limitations of common video formats (such as MP4 or AVI). If you want to include an animation or a video with a transparent background, here are two possible alternatives:

Image sequence: Use an image sequence exported from your animation software (like After Effects). This format enables you to display an animation while maintaining transparency. Import the images into PandaSuite and set them up as an animation.
Lottie Animation: If your animation was created in a tool compatible with the Lottie format, this option is perfect. Lottie is a lightweight vector animation format that supports transparency and seamlessly integrates into PandaSuite via the Lottie Animation component.