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.
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:
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:
Interactive Actions
Actions associated with the Video Player include:
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.