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.
⚠️ Note: Many web browsers (Firefox, Chrome) block autoplay videos when they start without user interaction. Learn more: Autoplay and Web Browsers
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.