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 は1秒に約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