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

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex