ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Medien

Video

rx.video

Offizielle Doku

Werkstattauftrag

Bitte auf der Produktkarte für die Vase statt des Fotos ein kurzes Vorstellungsvideo, das ohne Ton von selbst in Schleife läuft.

rx.video ist ein Player, der Videos abspielt. In src steht die Videoadresse; neben Adressen von Videodateien nimmt er auch Adressen von Seiten wie YouTube oder Vimeo an. Für test.mp4 im assets-Ordner schreibst du src="/test.mp4". Darunter steckt react-player, derselbe Baustein wie bei rx.audio, deshalb sind Props und Events identisch.

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

Props ausprobieren

playing, loop, muted und volume sind alles Props, die du über State-Werte ändern kannst. Die Größe legst du mit width fest; mit height="auto" bleibt das ursprüngliche Seitenverhältnis des Videos erhalten.

Props ausprobieren

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

Ohne controls verschwindet die Wiedergabeleiste. Dann spielst du über den playing-Schalter oder State-Buttons ab.

Prop	Werte	Standard	Verwendung
`src`	Adresse, Liste von Adressen, Liste von `{"src": …, "type": …}`	keiner	Das abzuspielende Video (Datei, YouTube, Vimeo …)
`playing`	`True` / `False`	`False`	Wiedergabe / Pause
`controls`	`True` / `False`	`True`	Wiedergabeleiste anzeigen
`loop`	`True` / `False`	`False`	Am Ende von vorn beginnen
`volume`	`0` bis `1`	`1`	Lautstärke
`muted`	`True` / `False`	`False`	Stummschalten; Pflicht für Autoplay
`light`	`True` / `False`	`False`	Statt des Players nur ein Vorschaubild, ein Klick öffnet den Player
`config`	dict	keiner	Einstellungen je Playertyp (`{"youtube": {…}}`, `{"vimeo": {…}}`)
`disable_remote_playback`	`True` / `False`	`False`	Wiedergabe auf anderen Geräten (Cast) abschalten
`width` · `height`	CSS-Größe	Inhaltsgröße	Größe des Players

Die Events sind dieselben wie bei Audio: on_ready, on_start, on_play, on_playing, on_pause, on_waiting, on_ended, on_error, on_seeking, on_seeked (Position, Sekunden), on_duration_change (Länge, Sekunden), on_time_update (aktuelle Position, Sekunden), on_progress ({played, playedSeconds, loaded, loadedSeconds, duration}), on_rate_change (Wiedergabegeschwindigkeit), on_click_preview, on_enter_picture_in_picture, on_leave_picture_in_picture.

Im Text der offiziellen Doku steht url="/test.mp4", aber in 0.10 heißt die Prop src. Mit url gibt es eine Warnung, und der Wert wird auf src übertragen. Reflex setzt den Standard für controls auf True.

Eine eigene Steuerleiste

Du versteckst die Standardleiste mit controls=False, bindest playing und muted an State-Werte und steuerst mit Buttons. Über on_duration_change erfährst du die Gesamtlänge, über on_time_update die aktuelle Position, und damit füllst du einen Fortschrittsbalken (rx.progress). on_time_update feuert etwa 4-mal pro Sekunde, deshalb drosselst du es mit .throttle(500), bevor es an den Server geht. Dieses Video startet stummgeschaltet.

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

Videos von YouTube und anderen Seiten

Steht in src eine Adresse von YouTube, Vimeo oder Ähnlichem, lädt react-player den Player dieser Seite und spielt damit ab. Einstellungen je Seite kommen unter den passenden Schlüssel in config. Damit diese Seite keine Skripte externer Seiten lädt, steht das hier nur als Code.

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: erst nur die Vorschau

Mit light=True siehst du anfangs nur ein Vorschaubild und einen Play-Button; erst beim Klick (on_click_preview) wird der echte Player geladen. So machst du Seiten mit vielen Videos leichter. Das Vorschaubild holt react-player über einen externen Dienst (noembed.com), deshalb steht es auf dieser Seite nur als Code.

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

Sollen Nutzer Videos hochladen, sieh dir die Seite zu Upload an.

Auftrag erledigt

Browser blockieren Autoplay mit Ton, erlauben es aber für Videos mit muted=True. Deshalb setzt du playing=True, muted=True und loop=True zusammen. Die Wiedergabeleiste bleibt versteckt, und rx.inset füllt den oberen Teil der Karte randlos.

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

Werkstattnotizen

rx.video(src="…"). Nimmt Videodateien, assets-Pfade (/test.mp4) und Adressen von YouTube oder Vimeo an.
Größe mit width, ursprüngliches Seitenverhältnis mit height="auto". controls ist standardmäßig True.
Autoplay: playing=True + muted=True. Schleife: loop=True.
Eigene Steuerleiste: controls=False + playing und muted im State + on_time_update (.throttle).
Die Prop heißt src (url ist der alte Name). Einstellungen je Seite mit config, leichte Vorschau mit light.

← Zurück

Medien · Audio

Weiter →

Tabellen und Datengrids · Table

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

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

Built with Reflex