Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Media

/

Video

The video component can display a video given an src path as an argument. This could either be a local path from the assets folder or an external link.

rx.video(
    url="https://www.youtube.com/embed/9bZkp7q19f0",
    width="400px",
    height="auto",
)

If we had a local file in the assets folder named test.mp4 we could set url="/test.mp3" to view the video.

Video component share with audio component.

PropTypeDescriptionValues
urlstr

The url of a video or song to play

playingbool

Set to true or false to pause or play the media

loopbool

Set to true or false to loop the media

controlsbool

Set to true or false to display native player controls.

lightbool

Set to true to show just the video thumbnail, which loads the full player on click

volumefloat

Set the volume of the player, between 0 and 1

mutedbool

Mutes the player

widthstr

Set the width of the player: ex:640px

heightstr

Set the height of the player: ex:640px

Event Triggers

TriggerDescription
on_ready

Called when media is loaded and ready to play. If playing is set to true, media will play immediately.

on_start

Called when media starts playing.

on_play

Called when media starts or resumes playing after pausing or buffering.

on_progress

Callback containing played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds. eg { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }

on_duration

Callback containing duration of the media, in seconds.

on_pause

Called when media is paused.

on_buffer

Called when media starts buffering.

on_buffer_end

Called when media has finished buffering. Works for files, YouTube and Facebook.

on_seek

Called when media seeks with seconds parameter.

on_playback_rate_change

Called when playback rate of the player changed. Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths.

on_playback_quality_change

Called when playback quality of the player changed. Only supported by YouTube (if enabled).

on_ended

Called when media finishes playing. Does not fire when loop is set to true.

on_error

Called when an error occurs whilst attempting to play media.

on_click_preview

Called when user clicks the light mode preview.

on_enable_pip

Called when picture-in-picture mode is enabled.

on_disable_pip

Called when picture-in-picture mode is disabled.

← ImageHtml →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting