Video

Open in Playground

Player with themed controls: play, seek, time, mute with a volume slider, playback speed and fullscreen, using the play, pause, volume and fullscreen icons with tooltips. The controls wrap onto a second row on narrow screens, so fullscreen is never cut off, and iPhone Safari (which can only fullscreen the video itself) is handled too. Pass speeds to change the rates offered. For several resolutions pass sources ([{ label: "1080p", src }, { label: "4K", src }]) instead of src: a quality menu appears with an Auto entry (the default) that picks a resolution from the player size and connection and steps down when playback stalls (autoQuality={false} removes it); switching keeps your position and whether it was playing, and defaultQuality picks the starting one. The controls float over the bottom of the video and fade out after hideDelay ms (default 2.5 s) without mouse, touch or keyboard activity while it plays, like YouTube; they stay while paused, hovered or focused, and autoHide={false} keeps them always visible. A spinner shows over the video when playback stalls to load more data (after a short delay, so brief hiccups do not flash it), and the seek bar shows how much is loaded. Extra props go to the <video> element; pass <track> children for captions.

0:00
0:00

Props

  • srcstring

    Video URL.

  • posterstring

    Poster image URL.

  • titlestring
    Default: 'Video'

    Accessible name.

  • ratio'video' | string
    Default: 'video'

    Use "video" for 16:9, anything else leaves it unset.

  • autoHideboolean
    Default: true

    Fade the controls out while playing when there is no activity.

  • hideDelaynumber
    Default: 2500

    Milliseconds without activity before the controls hide.

  • sources{ label, src }[]

    Several resolutions of the same video, e.g. [{ label: "1080p", src }, { label: "4K", src }]. Adds a quality menu; used instead of src.

  • defaultQualitystring
    Default: 'Auto'

    Label of the source to start with (Auto, or the first one when autoQuality is off).

  • autoQualityboolean
    Default: true

    Add an Auto entry that picks a resolution from the player size and connection and steps down when playback stalls.

  • speedsnumber[]
    Default: [0.5, 0.75, 1, 1.25, 1.5, 2]

    Playback rates offered in the speed menu (1 is normal).

  • classNamestring
    Default: ''

    Extra classes for the root element.

  • childrenReactNode

    e.g. <track> elements for captions.

  • ...rest

    Passed to the <video> element.