ReflexKR

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

表单

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

数据展示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

展开与切换

Tabs

Accordion

Segmented Control

浮层

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

动态渲染

Cond

Match

Foreach

Auto Scroll

媒体

Image

Audio

Video

表格与数据网格

Table

Data Table

Data Editor

图表

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

图表部件

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

其他图表库

Plotly

Pyplot

HTML 元素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

其他工具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

组件工坊：Reflex 组件库 100 例

媒体

Video

rx.video

官方文档

工坊订单

请在花瓶商品卡片的图片位置，放一段静音、自动循环播放的简短介绍视频。

rx.video 是播放视频的播放器。在 src 里填视频地址：不仅可以是视频文件地址，也可以是 YouTube、Vimeo 等网站的地址。如果是 assets 文件夹里的 test.mp4，就写 src="/test.mp4"。它内部基于 react-player，与 rx.audio 是同一个组件，所以属性和事件完全相同。

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

试着改属性

playing、loop、muted、volume 都是可以用 State 值改变的属性。尺寸用 width 设定，再设 height="auto" 就能保持视频的原始比例。

试着改属性

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")

关掉 controls 后播放控制条会消失。这时用 playing 开关或 State 按钮来播放。

属性	取值	默认值	用途
`src`	地址、地址列表、`{"src": …, "type": …}` 列表	无	要播放的视频（文件、YouTube、Vimeo …）
`playing`	`True` / `False`	`False`	播放 / 暂停
`controls`	`True` / `False`	`True`	显示播放控制条
`loop`	`True` / `False`	`False`	结束后从头再放
`volume`	`0` ~ `1`	`1`	音量
`muted`	`True` / `False`	`False`	静音。自动播放必须开启
`light`	`True` / `False`	`False`	只显示预览图而非播放器，点击后才打开播放器
`config`	dict	无	按播放器类型的设置（`{"youtube": {…}}`、`{"vimeo": {…}}`）
`disable_remote_playback`	`True` / `False`	`False`	关闭投放到其他设备播放（投屏）
`width` · `height`	CSS 尺寸	内容尺寸	播放器尺寸

事件与 Audio 相同：on_ready、on_start、on_play、on_playing、on_pause、on_waiting、on_ended、on_error、on_seeking、on_seeked（位置，秒）、on_duration_change（时长，秒）、on_time_update（当前位置，秒）、on_progress（{played, playedSeconds, loaded, loadedSeconds, duration}）、on_rate_change（播放速度）、on_click_preview、on_enter_picture_in_picture、on_leave_picture_in_picture。

官方文档正文里写的是 url="/test.mp4"，但 0.10 的属性名是 src。使用 url 会给出警告并转成 src。Reflex 把 controls 的默认值设为 True。

自制控制条

用 controls=False 隐藏默认控制条，把 playing、muted 绑定到 State 值上，用按钮来控制。通过 on_duration_change 拿到总时长，通过 on_time_update 拿到当前位置，用来填充进度条（rx.progress）。on_time_update 每秒触发约 4 次，所以用 .throttle(500) 降频后再发送到服务器。这段视频一开始是静音的。

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",
)

YouTube 及其他网站的视频

在 src 里放 YouTube、Vimeo 等地址，react-player 会加载该网站的播放器进行播放。各网站的设置放在 config 中对应的键下。为了不加载外部网站的脚本，本页只展示代码。

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：先只显示预览

light=True 时，一开始只显示预览图和播放按钮，点击后（on_click_preview）才加载真正的播放器。适合让视频很多的页面更轻量。预览图是 react-player 向外部服务（noembed.com）查询获取的，所以本页只展示代码。

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

要让用户上传视频，请参阅 Upload 页面。

完成订单

浏览器会阻止有声的自动播放，但允许 muted=True 的视频自动播放。所以同时设上 playing=True、muted=True、loop=True。隐藏播放控制条，并用 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",
)

工坊笔记

rx.video(src="…")。接受视频文件、assets 路径（/test.mp4）以及 YouTube、Vimeo 地址。
用 width 定尺寸，height="auto" 保持原始比例。controls 默认为 True。
自动播放用 playing=True + muted=True，循环用 loop=True。
自制控制条：controls=False + State 中的 playing、muted + on_time_update（.throttle）。
属性名是 src（url 是旧名称）。各网站设置用 config，轻量预览用 light。

← 上一课

媒体 · Audio

下一课 →

表格与数据网格 · Table

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

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

Built with Reflex