Video Player

Insert a video in your interface, customize the look and feel of the player and add actions to your video.

With the Video Player component, you can insert a video within your interface, as opposed to the Fullscreen Video component which automatically displays your video as a full screen pop-up. You can customize the appearance of the player, display it or not...

To insert a video, first import the video file in the Files window. You can import any type of format: MP4, AVI, WMV, MOV, FLV, MKV, MPG, MPEG. To insert a YouTube or Vimeo video, use the URL Media Player component.

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

Here are some of the properties:

Player Controls: choose whether to show the Play, Pause, Forward, Backward, Full Screen and move the playhead buttons
Loop: enable or disable looping playback
Volume: choose the default volume (1 being the initial volume of the video) and the volume range in the context of a synchronization.
Speed: choose the default speed (1 being the initial speed of the video) and the range of speed in synchronization.
Default time: to select the time that will be displayed when the report is loaded (based on the predefined markers). If you don't set anything and go back to this screen, you will go back to the beginning of your video.

Size of the video

By using this component, your video will be stored inside your application and downloaded locally by your user. To optimize the weight 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 have the possibility to change the quality of your video and its weight via the Quality. You can choose between: SD (240p), SD (360p), MD (480p), HD Ready (720p), Full HD (1080p) or UHD 4K (2160p).

If your application has many videos, you can also use the Partial Download component to allow the user to download them as they come in.

Editing a video

When you insert a Video Player, it has a fixed aspect ratio and black bars may appear if the aspect ratio does not match the original video. You can resize the player using the layout options, you must unlock the ratio.

It is not possible to resize the original video. Quick tip: turn your video into a Group and use the mask options to change the ratio.

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

Autoplay video

To automatically launch the playback, you just have to activate the Autoplay from the component properties.

⚠️ Beware that many web browsers (Firefox, Chrome) block autoplay videos when they start without user interaction. Learn more: Autoplay Blocking in Web Browser

Add actions to the Video Player

Your video can trigger an action, such as automatically switching screens at the end of the video.

Select your component and open the Actions window.

Click + New action to access the list of triggers:

Start playing
Pause playing
Stop playing
End playing

Your video can be the object of an action, for example you can create a button to launch a video.

Choose the trigger of your choice and the action Act on a component. Here is the list of available actions:

Play/Pause
Play
Pause
Stop
Advance
Rewind
Restart at beginning
Set/Remove Full Screen
Turn on volume
Increase volume
Decrease speed
Set speed
Increase speed
Decrease speed

Create markers

If you want to trigger an action at a certain point in the video or move your video to that point, you need to create cue points.

To create a cue point, go to the Component Properties window and click EDIT. Create a new cue point from the Edit 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 with another component

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

Time
Volume
Speed
Markers

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