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.

PropTypeDefault ValueValues
url
str
playing
bool
loop
bool
controls
bool
True
light
bool
volume
float
muted
bool
width
str
height
str

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.

← ImageClipboard →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting