This article is also available in:

Understanding the VIDEO controls

In this article, we'll explain how each video feature works. Here, you'll find a complete guide to the functionalities of our player, so you can make the most of all its options and customize your experience according to your needs.

Autoplay

Automatic playback allows the video to start as soon as the page loads, without the need for the user to press the play button.

How does it work?

When activated, the video starts automatically when the page loads.
Some browsers block automatic playback if the video has audio activated. To avoid this, we recommend setting the video to start without sound.
If it is disabled, the user will have to press the play button to start playback.

When to use it?

In institutional or explanatory videos to engage the user quickly.
On sales and marketing pages, where the video can impact conversion.
In training or educational content, ensuring that the message is seen without depending on user interaction.

Controls

This button allows you to activate or deactivate the player interface, which includes the playback buttons, progress bar, volume control and other interactive options.

How does it work?

When activated: The user will see all the player's controls, including play, pause, volume, progress bar, duration time and options such as full screen and forward/backward.

When disabled: The player interface is hidden, removing the loading bar, time controls and other buttons. This way, the video will play without visual interruptions, useful for more immersive experiences.

When to use?

Enabled: To allow the user to have total control over video playback.
When you want a cleaner, more automatic experience, such as in background videos, presentations or content displayed without direct user interaction.

Big Play Button

This button is a larger visual element positioned over the video before playback.

How does it work?

It appears before the user starts the video.
When clicked, it starts playback immediately.
Disappears as soon as the video starts.

## When to use?

To encourage the user to start playing.
When the video is inserted into a page and needs to attract more attention.

Play button

This button allows the user to start and pause video playback as required.

How does it work?

When pressed, it starts or pauses the video.
Usually located in the bottom left-hand corner of the player.

When to use it?

Whenever it is necessary to give the user control over video playback.

Mute

The mute button allows you to turn the video audio on or off.

How does it work?

If activated, the video will be played without sound.
If deactivated, the video's audio will play normally.

When to use it?

To ensure that the video is played automatically without being blocked by the browser.
When the video needs to be available without interfering with other media the user may be listening to.

Volume

Allows the user to adjust the video volume.

How does it work?

The volume control allows the user to adjust the audio level of the video. You can define whether the video will be played with the volume on or without sound.
A slider allows you to increase or decrease the volume.
If the volume is reduced to zero, the video can be considered muted.

When to use?

When the user needs to adjust the volume to their preference.
When the video contains audio and you want to allow dynamic volume adjustments without relying on device control.

Time

Displays the total duration of the video and the time it has already been played.

How does it work?

Shows the elapsed time and the total time of the video.
It can let the user know how far into the video they are.

When to use it?

To give the user an idea of how much time is left until the end of the video.
To allow navigation to specific points in the video.

Full Screen Mode

Expands the video to occupy the user's entire screen.

How does it work?

When activated, the video is displayed in full screen.
To exit, simply press the "Esc" key or click the button again.

When to use it?

When the user wants to watch the video with more immersion.
In presentations or tutorials where visual details are important.

Rewind 10 seconds

Allows the user to quickly rewind the video in 10-second intervals.

How does it work?

By clicking the button, the video goes back 10 seconds in playback.
It can be used several times to go back even further.

When to use it?

When the user needs to review a specific part of the video.

Forward 10 seconds

Allows the user to fast-forward through the video in 10-second intervals.

How does it work?

By clicking the button, the video advances 10 seconds in playback.
It can be used repeatedly to advance even further.

When to use?

When the user wants to skip part of the content.

Progress bar

Allows the user to view and control the current point in the video playback.

**How does it work?

Displays a continuous line representing the total duration of the video.
The highlighted point shows the current playback time.
The user can click or drag the bar to go straight to a specific moment in the video.

**When to use it?

To quickly navigate through specific sections of content.
To review important parts or move on as far as you wish.

Video quality

This option in the player allows the user to customize the viewing experience by adjusting both the resolution of the video and the playback speed, all in one place.

Quality Adjustment (Resolution)

**How does it work?

The user can select different resolutions, such as 1080p, 720p, 480p, etc.
Ideal for adapting the video to the quality of the connection or the size of the screen.
In the same “Quality” menu, you can choose the video playback speed.
The options range from slower speeds (e.g. 0.5x) to faster speeds (e.g. 2x), depending on the user's preference.

**When to use it?

To improve sharpness on large screens or avoid crashes on slower networks.
To speed up repetitive content or review something more carefully at slower speeds.

Primary Color

Defines the main color used in the player's controls.

How does it work?

Customizes the player's appearance to match the site's visual identity.
Applies to buttons, progress bar and other visual elements.
The percentage bar adjusts the intensity of the color, making it stronger or more discreet according to your needs.