Bubble.io player element

Bubble is a no-code tool that lets you build SaaS platforms, marketplaces and CRMs without code. You use the player element to set up video players on your site.

Basic usage

To add a video player to a page of your site, click on the "api.video player" item of the Visual elements list.

281

Then, draw the player on your page using your mouse, like you do we any other Visual component. Once done, double-click on the player to open the window for editing its properties.

You should see something like that:

1009

As you can see, there is a list of specific attributes that you can use to customize your player:

Option nameMandatoryTypeDescription
videoidyesstringthe id of the video (VoD or live) to play. This value is dynamic. That means that you can get them from your database, or from another element (a list of videos, for instance)
liveno (default: false)booleanindicate that the video is a live one
autoplayno (default: false)booleanstart playing the video as soon as it is loaded
mutedno (default: false)booleanthe video is muted
hideControlsno (default: false)booleanthe controls are hidden
hideTitleno (default: false)booleanthe video title is hidden
showSubtitlesno (default: false)booleanthe video subtitles are shown by default
loopno (default: false)booleanonce the video is finished, it automatically starts again

Once you've entered a videoId, you can click on "preview" to see your player in action.

723

Events

The video player element will trigger events during playback, so you will be able to perform some conditional actions like displaying a custom replay button when playback ends, or incrementing a views counter when playback starts.

Here is the list of all events triggered by the player:

Event nameDescription
endedThe playback as reached the end of the video
errorAn error occurred
firstplayThe video started to play for the first time
mouseenterThe user's mouse entered the player area
mouseleaveThe user's mouse left the player area
pauseThe video has been paused
playThe video started to play (for the first time or after having been paused)
readyThe player is ready to play
resizeThe video size has changed
seekingThe player is seeking

To perform an action when an event occurs, go to the workflow tab, create a new workflow, and as a trigger condition, select "Elements -> A api.video player ..." :

563

Exposed state

The player element has a single exposed state. This contains the "timeupdate" value, which corresponds to the time of the playback progress in seconds. This value is sent several times per second and allows to follow precisely the progression of the playback.

Actions

The player exposes several actions that can be triggered from a workflow. That makes it fully controllable.

Here is the list of available actions:

Action nameDescription
playStart playing the video
pausePause the video playback
muteMute the video
unmuteUnmute the video
hideControlsHide the player controls
showControlsShow the player controls
hideSubtitlesHide the player subtitles
showSubtitlesShow the player subtitles