ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Multimedia

Video

rx.video

Documentación oficial

Pedido del taller

En el hueco de la foto de la tarjeta de un jarrón, pon un vídeo corto de presentación que se reproduzca solo, sin sonido y en bucle.

rx.video es un reproductor de vídeo. En src va la dirección del vídeo: además de archivos de vídeo, acepta direcciones de sitios como YouTube o Vimeo. Para test.mp4 en la carpeta assets, src="/test.mp4". Por dentro es react-player, la misma pieza que rx.audio, así que las propiedades y los eventos son idénticos.

rx.video(src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", width="400px", height="auto")

Prueba las propiedades

playing, loop, muted y volume son propiedades que puedes cambiar con valores del State. El tamaño se fija con width, y con height="auto" se mantiene la proporción original del vídeo.

Prueba las propiedades

playing

loop

controls

muted

volume

0.8

width

rx.video(src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", playing=False, loop=False, controls=True, muted=False, volume=0.8, width="400px", height="auto")

Si desactivas controls, desaparece la barra de reproducción. Entonces se reproduce con el interruptor playing o con botones del State.

Propiedad	Valores	Por defecto	Uso
`src`	dirección, lista de direcciones, lista de `{"src": …, "type": …}`	ninguno	Vídeo que se reproduce (archivo, YouTube, Vimeo …)
`playing`	`True` / `False`	`False`	Reproducir / pausar
`controls`	`True` / `False`	`True`	Mostrar la barra de reproducción
`loop`	`True` / `False`	`False`	Volver a empezar al terminar
`volume`	`0` ~ `1`	`1`	Volumen
`muted`	`True` / `False`	`False`	Silenciar. Imprescindible para la reproducción automática
`light`	`True` / `False`	`False`	Solo una imagen de vista previa en lugar del reproductor; al pulsar, se abre
`config`	dict	ninguno	Ajustes por tipo de reproductor (`{"youtube": {…}}`, `{"vimeo": {…}}`)
`disable_remote_playback`	`True` / `False`	`False`	Desactivar la reproducción en otro dispositivo (cast)
`width` · `height`	tamaño CSS	tamaño del contenido	Tamaño del reproductor

Los eventos son los mismos que en Audio: on_ready, on_start, on_play, on_playing, on_pause, on_waiting, on_ended, on_error, on_seeking, on_seeked (posición, segundos), on_duration_change (duración, segundos), on_time_update (posición actual, segundos), on_progress ({played, playedSeconds, loaded, loadedSeconds, duration}), on_rate_change (velocidad de reproducción), on_click_preview, on_enter_picture_in_picture, on_leave_picture_in_picture.

El texto de la documentación oficial pone url="/test.mp4", pero en 0.10 la propiedad se llama src. Si usas url, sale un aviso y se convierte en src. Reflex pone controls a True por defecto.

Tu propia barra de control

Ocultamos la barra por defecto con controls=False, enlazamos playing y muted a valores del State y lo controlamos con botones. Con on_duration_change recibimos la duración total y con on_time_update la posición actual, para llenar una barra de progreso (rx.progress). on_time_update ocurre unas 4 veces por segundo, así que lo reducimos con .throttle(500) antes de enviarlo al servidor. Este vídeo empieza silenciado.

0 / 0 s

Finished: 0

class VideoPlayerState(rx.State):
    playing: bool = False
    muted: bool = True
    position: float = 0.0
    duration: float = 0.0
    finished: int = 0

    @rx.var
    def percent(self) -> int:
        return int(self.position / self.duration * 100) if self.duration else 0

    @rx.event
    def toggle_play(self):
        self.playing = not self.playing

    @rx.event
    def toggle_mute(self):
        self.muted = not self.muted

    @rx.event
    def got_duration(self, seconds: float):
        self.duration = round(seconds, 1)

    @rx.event
    def got_time(self, seconds: float):
        self.position = round(seconds, 1)

    @rx.event
    def mark_ended(self):
        self.playing = False
        self.finished += 1


rx.vstack(
    rx.video(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
        playing=VideoPlayerState.playing,
        muted=VideoPlayerState.muted,
        controls=False,
        width="100%",
        max_width="420px",
        height="auto",
        border_radius="8px",
        overflow="hidden",
        on_duration_change=VideoPlayerState.got_duration,
        on_time_update=VideoPlayerState.got_time.throttle(500),
        on_ended=VideoPlayerState.mark_ended,
    ),
    rx.progress(value=VideoPlayerState.percent, max_width="420px"),
    rx.flex(
        rx.icon_button(
            rx.cond(VideoPlayerState.playing, rx.icon("pause"), rx.icon("play")),
            on_click=VideoPlayerState.toggle_play,
            aria_label="Play or pause",
        ),
        rx.icon_button(
            rx.cond(VideoPlayerState.muted, rx.icon("volume-x"), rx.icon("volume-2")),
            on_click=VideoPlayerState.toggle_mute,
            variant="soft",
            aria_label="Mute or unmute",
        ),
        rx.text(VideoPlayerState.position, " / ", VideoPlayerState.duration, " s", size="2"),
        rx.text("Finished: ", VideoPlayerState.finished, size="2", color_scheme="gray"),
        spacing="3",
        align="center",
    ),
    width="100%",
    spacing="3",
)

Vídeos de YouTube y otros sitios

Si pones en src una dirección de YouTube o Vimeo, react-player carga el reproductor de ese sitio y lo reproduce. Los ajustes de cada sitio van bajo su clave en config. Para no cargar scripts de sitios externos, esta página solo lo muestra como código.

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

rx.video(
    src="https://www.youtube.com/watch?v=9bZkp7q19f0",
    config={"youtube": {"color": "white"}},
    width="400px",
    height="225px",
)

light: primero solo la vista previa

Con light=True, al principio solo se ven una imagen de vista previa y el botón de reproducir; al pulsarlo (on_click_preview), se carga el reproductor de verdad. Sirve para aligerar páginas con muchos vídeos. react-player obtiene la imagen de vista previa consultando un servicio externo (noembed.com), así que en esta página solo se muestra como código.

rx.video(src="https://www.youtube.com/watch?v=9bZkp7q19f0", light=True, width="400px", height="225px")

Si quieres que los usuarios suban vídeos, consulta la página de Upload.

Completar el pedido

El navegador bloquea la reproducción automática con sonido, pero la permite en vídeos con muted=True. Por eso damos a la vez playing=True, muted=True y loop=True. Ocultamos la barra de reproducción y llenamos la parte superior de la tarjeta con rx.inset.

Spring Bloom Vase

Hand-glazed ceramic, 24 cm

rx.card(
    rx.inset(
        rx.video(
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
            playing=True,
            muted=True,
            loop=True,
            controls=False,
            width="100%",
            height="auto",
        ),
        side="top",
        pb="current",
    ),
    rx.text("Spring Bloom Vase", weight="bold"),
    rx.text("Hand-glazed ceramic, 24 cm", size="2", color_scheme="gray"),
    max_width="320px",
)

Notas del taller

rx.video(src="…"). Acepta archivos de vídeo, rutas de assets (/test.mp4) y direcciones de YouTube o Vimeo.
width para el tamaño y height="auto" para la proporción original. controls es True por defecto.
Reproducción automática: playing=True + muted=True. Bucle: loop=True.
Barra de control propia: controls=False + playing y muted del State + on_time_update (.throttle).
La propiedad se llama src (url es el nombre antiguo). Ajustes por sitio en config; vista previa ligera con light.

← Anterior

Multimedia · Audio

Tablas y cuadrículas de datos · Table

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex