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.

    Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.