Skip to main content

Inputs

AspectRatioSelect​

Select input that lets the user pick the media-stream controller's aspect ratio from a fixed set of common values (3:2, 4:3, 16:9, 8:5).

Used in

import { AspectRatioSelect } from '@video/video-client-react';
function AspectRatioSelect(props: SelectBaseProps): Element

Props​

SelectBaseProps
classNamesSelectClassNames
Selectstring

AudioSourceSelect​

Select input listing every audio input device known to the platform media controller. Setting a value writes the chosen device id back to the media- stream controller.

Used in

import { AudioSourceSelect } from '@video/video-client-react';
function AudioSourceSelect(props: SelectBaseProps): Element

Props​

SelectBaseProps
classNamesSelectClassNames
Selectstring

PositionRange​

Range slider that controls the player's playback position. Uses seek for VOD/recorded content and enableDvr/disableDvr for live/DVR content; once VOD content has been paused, the component remembers that and keeps using seek even if the mode briefly drifts.

import { PositionRange } from '@video/video-client-react';
function PositionRange(props: RangeBaseProps): React.ReactNode

Props​

RangeBaseProps
classNamesRangeClassNames
Rangestring

QualitySelect​

Select input that lists the player's available qualities and writes the chosen value through setPreferredQuality. Mirrors the most recent preferredQuality event payload into local state so the select re-renders even if the player property hasn't settled yet.

Used in

import { QualitySelect } from '@video/video-client-react';
function QualitySelect(props: SelectBaseProps): Element

Props​

SelectBaseProps
classNamesSelectClassNames
Selectstring

ResolutionInUseSelect​

Select input listing the resolutions currently available across all media-stream controllers that share the same device. Setting a value writes the chosen numeric height back to the media-stream controller's resolution.

import { ResolutionInUseSelect } from '@video/video-client-react';
function ResolutionInUseSelect(props: SelectBaseProps): Element

Props​

SelectBaseProps
classNamesSelectClassNames
Selectstring

ResolutionSelect​

Select input listing the resolutions reported by the active video device.

Used in

import { ResolutionSelect } from '@video/video-client-react';
function ResolutionSelect(props: SelectBaseProps): Element

Props​

SelectBaseProps
classNamesSelectClassNames
Selectstring

VideoSourceInUseSelect​

Select input listing every video input device, with options for devices already in use by another controller disabled. Setting a value writes the chosen device id to the media-stream controller and resets the resolution so it re-negotiates against the new source.

import { VideoSourceInUseSelect } from '@video/video-client-react';
function VideoSourceInUseSelect(props: SelectBaseProps): Element

Props​

SelectBaseProps
classNamesSelectClassNames
Selectstring

VideoSourceSelect​

Select input listing every video input device known to the platform media controller. Setting a value writes the chosen device id back to the media- stream controller.

Used in

import { VideoSourceSelect } from '@video/video-client-react';
function VideoSourceSelect(props: SelectBaseProps): Element

Props​

SelectBaseProps
classNamesSelectClassNames
Selectstring

VolumeRange​

Range slider that controls the player's volume. Streams the live value to local state during drag for smooth visual feedback and writes back to the player once the interaction ends — on pointer release, or when a keyboard step key is released — avoiding excessive setVolume calls.

Used in

import { VolumeRange } from '@video/video-client-react';
function VolumeRange(props: RangeBaseProps): Element | literal

Props​

RangeBaseProps
classNamesRangeClassNames
Rangestring