Video Player

A composable, shadcn/ui styled video player component that uses the media-chrome library.

media-chrome

Installation

npx kibo-ui@latest add video-player

Features

Customizable media player controls
Responsive design that works across devices
Keyboard accessibility for media controls
Support for various media formats
Themeable with CSS variables
Lightweight and performant
Modular architecture allowing use of only needed components
Time display with customizable format
Volume controls with mute functionality
Playback controls (play/pause, seek forward/backward)
Progress bar with interactive seeking
Cross-browser compatibility

Props

The video player is made up of the following props:

VideoPlayer

The VideoPlayer component is used to control the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaController>`	-
`userInteractive?`	`boolean`	-
`autohideOverControls?`	`boolean`	-
`noAutohide?`	`boolean`	-
`keyboardControl?`	`boolean`	-
`gesturesDisabled?`	`boolean`	-
`audio?`	`boolean`	-
`breakpoints?`	`string`	-
`autohide?`	`string`	-
`handleEvent?`	`((event: Event) => void)`	-
`handleMediaUpdated?`	`((media: HTMLMediaElement) => Promise<void>)`	-
`media?`	`HTMLVideoElement \| null`	-
`breakpointsComputed?`	`boolean`	-
`keyboardShortcutHandler?`	`((e: KeyboardEvent) => void)`	-
`hotkeys?`	`string`	-
`disableHotkeys?`	`(() => void)`	-
`enableHotkeys?`	`(() => void)`	-
`unregisterMediaStateReceiver?`	`((el: HTMLElement) => void)`	-
`registerMediaStateReceiver?`	`((el: HTMLElement) => void)`	-
`unassociateElement?`	`((element: HTMLElement) => void)`	-
`associateElement?`	`((element: HTMLElement) => void)`	-
`propagateMediaState?`	`((stateName: string, state: any) => void)`	-
`mediaUnsetCallback?`	`((media: HTMLMediaElement) => void)`	-
`mediaSetCallback?`	`((media: HTMLMediaElement) => void)`	-
`noDefaultStore?`	`boolean`	-
`noSubtitlesLangPref?`	`boolean`	-
`noVolumePref?`	`boolean`	-
`noAutoSeekToLive?`	`boolean`	-
`liveEdgeOffset?`	`number`	-
`keysUsed?`	`string`	-
`noHotkeys?`	`boolean`	-
`defaultDuration?`	`number`	-
`defaultStreamType?`	`string`	-
`defaultSubtitles?`	`boolean`	-
`fullscreenElement?`	`HTMLElement`	-
`mediaStore?`	`MediaStore`	-
`associatedElementSubscriptions?`	`Map<HTMLElement, () => void>`	-
`mediaStateReceivers?`	`HTMLElement[]`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaController>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaController>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaController>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaController>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaController>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaController>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaController>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaController>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaController>`	-
`onToggle?`	`ToggleEventHandler<MediaController>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaController>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaController>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaController>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaController>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaController>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaController>`	-
`onWheelCapture?`	`WheelEventHandler<MediaController>`	-
`onWheel?`	`WheelEventHandler<MediaController>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaController>`	-
`onScrollEnd?`	`UIEventHandler<MediaController>`	-
`onScrollCapture?`	`UIEventHandler<MediaController>`	-
`onScroll?`	`UIEventHandler<MediaController>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaController>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaController>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaController>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaController>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaController>`	-
`onPointerOut?`	`PointerEventHandler<MediaController>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaController>`	-
`onPointerOver?`	`PointerEventHandler<MediaController>`	-
`onPointerLeave?`	`PointerEventHandler<MediaController>`	-
`onPointerEnter?`	`PointerEventHandler<MediaController>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaController>`	-
`onPointerCancel?`	`PointerEventHandler<MediaController>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaController>`	-
`onPointerUp?`	`PointerEventHandler<MediaController>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaController>`	-
`onPointerMove?`	`PointerEventHandler<MediaController>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaController>`	-
`onPointerDown?`	`PointerEventHandler<MediaController>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaController>`	-
`onTouchStart?`	`TouchEventHandler<MediaController>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaController>`	-
`onTouchMove?`	`TouchEventHandler<MediaController>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaController>`	-
`onTouchEnd?`	`TouchEventHandler<MediaController>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaController>`	-
`onTouchCancel?`	`TouchEventHandler<MediaController>`	-
`onSelectCapture?`	`ReactEventHandler<MediaController>`	-
`onSelect?`	`ReactEventHandler<MediaController>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaController>`	-
`onMouseUp?`	`MouseEventHandler<MediaController>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaController>`	-
`onMouseOver?`	`MouseEventHandler<MediaController>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaController>`	-
`onMouseOut?`	`MouseEventHandler<MediaController>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaController>`	-
`onMouseMove?`	`MouseEventHandler<MediaController>`	-
`onMouseLeave?`	`MouseEventHandler<MediaController>`	-
`onMouseEnter?`	`MouseEventHandler<MediaController>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaController>`	-
`onMouseDown?`	`MouseEventHandler<MediaController>`	-
`onDropCapture?`	`DragEventHandler<MediaController>`	-
`onDrop?`	`DragEventHandler<MediaController>`	-
`onDragStartCapture?`	`DragEventHandler<MediaController>`	-
`onDragStart?`	`DragEventHandler<MediaController>`	-
`onDragOverCapture?`	`DragEventHandler<MediaController>`	-
`onDragOver?`	`DragEventHandler<MediaController>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaController>`	-
`onDragLeave?`	`DragEventHandler<MediaController>`	-
`onDragExitCapture?`	`DragEventHandler<MediaController>`	-
`onDragExit?`	`DragEventHandler<MediaController>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaController>`	-
`onDragEnter?`	`DragEventHandler<MediaController>`	-
`onDragEndCapture?`	`DragEventHandler<MediaController>`	-
`onDragEnd?`	`DragEventHandler<MediaController>`	-
`onDragCapture?`	`DragEventHandler<MediaController>`	-
`onDrag?`	`DragEventHandler<MediaController>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaController>`	-
`onDoubleClick?`	`MouseEventHandler<MediaController>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaController>`	-
`onContextMenu?`	`MouseEventHandler<MediaController>`	-
`onClickCapture?`	`MouseEventHandler<MediaController>`	-
`onClick?`	`MouseEventHandler<MediaController>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaController>`	-
`onAuxClick?`	`MouseEventHandler<MediaController>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaController>`	-
`onWaiting?`	`ReactEventHandler<MediaController>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaController>`	-
`onVolumeChange?`	`ReactEventHandler<MediaController>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaController>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaController>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaController>`	-
`onSuspend?`	`ReactEventHandler<MediaController>`	-
`onStalledCapture?`	`ReactEventHandler<MediaController>`	-
`onStalled?`	`ReactEventHandler<MediaController>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaController>`	-
`onSeeking?`	`ReactEventHandler<MediaController>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaController>`	-
`onSeeked?`	`ReactEventHandler<MediaController>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaController>`	-
`onRateChange?`	`ReactEventHandler<MediaController>`	-
`onProgressCapture?`	`ReactEventHandler<MediaController>`	-
`onProgress?`	`ReactEventHandler<MediaController>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaController>`	-
`onPlaying?`	`ReactEventHandler<MediaController>`	-
`onPlayCapture?`	`ReactEventHandler<MediaController>`	-
`onPlay?`	`ReactEventHandler<MediaController>`	-
`onPauseCapture?`	`ReactEventHandler<MediaController>`	-
`onPause?`	`ReactEventHandler<MediaController>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaController>`	-
`onLoadStart?`	`ReactEventHandler<MediaController>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaController>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaController>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaController>`	-
`onLoadedData?`	`ReactEventHandler<MediaController>`	-
`onEndedCapture?`	`ReactEventHandler<MediaController>`	-
`onEnded?`	`ReactEventHandler<MediaController>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaController>`	-
`onEncrypted?`	`ReactEventHandler<MediaController>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaController>`	-
`onEmptied?`	`ReactEventHandler<MediaController>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaController>`	-
`onDurationChange?`	`ReactEventHandler<MediaController>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaController>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaController>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaController>`	-
`onCanPlay?`	`ReactEventHandler<MediaController>`	-
`onAbortCapture?`	`ReactEventHandler<MediaController>`	-
`onAbort?`	`ReactEventHandler<MediaController>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaController>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaController>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaController>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaController>`	-
`onErrorCapture?`	`ReactEventHandler<MediaController>`	-
`onError?`	`ReactEventHandler<MediaController>`	-
`onLoadCapture?`	`ReactEventHandler<MediaController>`	-
`onLoad?`	`ReactEventHandler<MediaController>`	-
`onInvalidCapture?`	`FormEventHandler<MediaController>`	-
`onInvalid?`	`FormEventHandler<MediaController>`	-
`onSubmitCapture?`	`FormEventHandler<MediaController>`	-
`onSubmit?`	`FormEventHandler<MediaController>`	-
`onResetCapture?`	`FormEventHandler<MediaController>`	-
`onReset?`	`FormEventHandler<MediaController>`	-
`onInputCapture?`	`FormEventHandler<MediaController>`	-
`onInput?`	`FormEventHandler<MediaController>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaController>`	-
`onBeforeInput?`	`FormEventHandler<MediaController>`	-
`onChangeCapture?`	`FormEventHandler<MediaController>`	-
`onChange?`	`FormEventHandler<MediaController>`	-
`onBlurCapture?`	`FocusEventHandler<MediaController>`	-
`onBlur?`	`FocusEventHandler<MediaController>`	-
`onFocusCapture?`	`FocusEventHandler<MediaController>`	-
`onFocus?`	`FocusEventHandler<MediaController>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaController>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaController>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaController>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaController>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaController>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaController>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaController>`	-
`onPaste?`	`ClipboardEventHandler<MediaController>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaController>`	-
`onCut?`	`ClipboardEventHandler<MediaController>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaController>`	-
`onCopy?`	`ClipboardEventHandler<MediaController>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaController>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaController>`	-

VideoPlayerContent

The VideoPlayerContent component is used to control the video player.

Prop	Type	Default
`onTransitionStartCapture?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onTransitionStart?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onTransitionRun?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<HTMLVideoElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<HTMLVideoElement>`	-
`onToggle?`	`ToggleEventHandler<HTMLVideoElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<HTMLVideoElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<HTMLVideoElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<HTMLVideoElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<HTMLVideoElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<HTMLVideoElement>`	-
`onAnimationStart?`	`AnimationEventHandler<HTMLVideoElement>`	-
`onWheelCapture?`	`WheelEventHandler<HTMLVideoElement>`	-
`onWheel?`	`WheelEventHandler<HTMLVideoElement>`	-
`onScrollEndCapture?`	`UIEventHandler<HTMLVideoElement>`	-
`onScrollEnd?`	`UIEventHandler<HTMLVideoElement>`	-
`onScrollCapture?`	`UIEventHandler<HTMLVideoElement>`	-
`onScroll?`	`UIEventHandler<HTMLVideoElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerOut?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerOver?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerLeave?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerEnter?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerCancel?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerUp?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerMove?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<HTMLVideoElement>`	-
`onPointerDown?`	`PointerEventHandler<HTMLVideoElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<HTMLVideoElement>`	-
`onTouchStart?`	`TouchEventHandler<HTMLVideoElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<HTMLVideoElement>`	-
`onTouchMove?`	`TouchEventHandler<HTMLVideoElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<HTMLVideoElement>`	-
`onTouchEnd?`	`TouchEventHandler<HTMLVideoElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<HTMLVideoElement>`	-
`onTouchCancel?`	`TouchEventHandler<HTMLVideoElement>`	-
`onSelectCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onSelect?`	`ReactEventHandler<HTMLVideoElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseUp?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseOver?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseOut?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseMove?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseLeave?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseEnter?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onMouseDown?`	`MouseEventHandler<HTMLVideoElement>`	-
`onDropCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDrop?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragStartCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragStart?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragOverCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragOver?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragExitCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragExit?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragEnterCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragEnter?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragEndCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragEnd?`	`DragEventHandler<HTMLVideoElement>`	-
`onDragCapture?`	`DragEventHandler<HTMLVideoElement>`	-
`onDrag?`	`DragEventHandler<HTMLVideoElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onDoubleClick?`	`MouseEventHandler<HTMLVideoElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onContextMenu?`	`MouseEventHandler<HTMLVideoElement>`	-
`onClickCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onClick?`	`MouseEventHandler<HTMLVideoElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<HTMLVideoElement>`	-
`onAuxClick?`	`MouseEventHandler<HTMLVideoElement>`	-
`onWaitingCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onWaiting?`	`ReactEventHandler<HTMLVideoElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onVolumeChange?`	`ReactEventHandler<HTMLVideoElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onTimeUpdate?`	`ReactEventHandler<HTMLVideoElement>`	-
`onSuspendCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onSuspend?`	`ReactEventHandler<HTMLVideoElement>`	-
`onStalledCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onStalled?`	`ReactEventHandler<HTMLVideoElement>`	-
`onSeekingCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onSeeking?`	`ReactEventHandler<HTMLVideoElement>`	-
`onSeekedCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onSeeked?`	`ReactEventHandler<HTMLVideoElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onRateChange?`	`ReactEventHandler<HTMLVideoElement>`	-
`onProgressCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onProgress?`	`ReactEventHandler<HTMLVideoElement>`	-
`onPlayingCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onPlaying?`	`ReactEventHandler<HTMLVideoElement>`	-
`onPlayCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onPlay?`	`ReactEventHandler<HTMLVideoElement>`	-
`onPauseCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onPause?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoadStart?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoadedData?`	`ReactEventHandler<HTMLVideoElement>`	-
`onEndedCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onEnded?`	`ReactEventHandler<HTMLVideoElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onEncrypted?`	`ReactEventHandler<HTMLVideoElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onEmptied?`	`ReactEventHandler<HTMLVideoElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onDurationChange?`	`ReactEventHandler<HTMLVideoElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<HTMLVideoElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onCanPlay?`	`ReactEventHandler<HTMLVideoElement>`	-
`onAbortCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onAbort?`	`ReactEventHandler<HTMLVideoElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<HTMLVideoElement>`	-
`onKeyUp?`	`KeyboardEventHandler<HTMLVideoElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<HTMLVideoElement>`	-
`onKeyDown?`	`KeyboardEventHandler<HTMLVideoElement>`	-
`onErrorCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onError?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoadCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onLoad?`	`ReactEventHandler<HTMLVideoElement>`	-
`onInvalidCapture?`	`FormEventHandler<HTMLVideoElement>`	-
`onInvalid?`	`FormEventHandler<HTMLVideoElement>`	-
`onSubmitCapture?`	`FormEventHandler<HTMLVideoElement>`	-
`onSubmit?`	`FormEventHandler<HTMLVideoElement>`	-
`onResetCapture?`	`FormEventHandler<HTMLVideoElement>`	-
`onReset?`	`FormEventHandler<HTMLVideoElement>`	-
`onInputCapture?`	`FormEventHandler<HTMLVideoElement>`	-
`onInput?`	`FormEventHandler<HTMLVideoElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<HTMLVideoElement>`	-
`onBeforeInput?`	`FormEventHandler<HTMLVideoElement>`	-
`onChangeCapture?`	`FormEventHandler<HTMLVideoElement>`	-
`onChange?`	`FormEventHandler<HTMLVideoElement>`	-
`onBlurCapture?`	`FocusEventHandler<HTMLVideoElement>`	-
`onBlur?`	`FocusEventHandler<HTMLVideoElement>`	-
`onFocusCapture?`	`FocusEventHandler<HTMLVideoElement>`	-
`onFocus?`	`FocusEventHandler<HTMLVideoElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<HTMLVideoElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<HTMLVideoElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<HTMLVideoElement>`	-
`onCompositionStart?`	`CompositionEventHandler<HTMLVideoElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<HTMLVideoElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<HTMLVideoElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<HTMLVideoElement>`	-
`onPaste?`	`ClipboardEventHandler<HTMLVideoElement>`	-
`onCutCapture?`	`ClipboardEventHandler<HTMLVideoElement>`	-
`onCut?`	`ClipboardEventHandler<HTMLVideoElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<HTMLVideoElement>`	-
`onCopy?`	`ClipboardEventHandler<HTMLVideoElement>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`children?`	`ReactNode`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "listbox" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"none" \| "list" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`part?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`inputMode?`	`"search" \| "text" \| "none" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`inert?`	`boolean`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`prefix?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`role?`	`AriaRole`	-
`radioGroup?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`tabIndex?`	`number`	-
`style?`	`CSSProperties`	-
`spellCheck?`	`Booleanish`	-
`slot?`	`string`	-
`nonce?`	`string`	-
`lang?`	`string`	-
`id?`	`string`	-
`hidden?`	`boolean`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`contextMenu?`	`string`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`className?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})`	-
`accessKey?`	`string`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`src?`	`string`	-
`preload?`	`string`	-
`muted?`	`boolean`	-
`mediaGroup?`	`string`	-
`loop?`	`boolean`	-
`crossOrigin?`	`CrossOrigin`	-
`controlsList?`	`string`	-
`controls?`	`boolean`	-
`autoPlay?`	`boolean`	-
`onResizeCapture?`	`ReactEventHandler<HTMLVideoElement>`	-
`onResize?`	`ReactEventHandler<HTMLVideoElement>`	-
`disableRemotePlayback?`	`boolean`	-
`disablePictureInPicture?`	`boolean`	-
`width?`	`string \| number`	-
`poster?`	`string`	-
`playsInline?`	`boolean`	-
`height?`	`string \| number`	-
`key?`	`Key \| null`	-
`ref?`	`Ref<HTMLVideoElement>`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<HTMLVideoElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<HTMLVideoElement>`	-

VideoPlayerControlBar

The VideoPlayerControlBar component is used to control the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaControlBar>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaControlBar>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaControlBar>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaControlBar>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaControlBar>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaControlBar>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaControlBar>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaControlBar>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaControlBar>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaControlBar>`	-
`onToggle?`	`ToggleEventHandler<MediaControlBar>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaControlBar>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaControlBar>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaControlBar>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaControlBar>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaControlBar>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaControlBar>`	-
`onWheelCapture?`	`WheelEventHandler<MediaControlBar>`	-
`onWheel?`	`WheelEventHandler<MediaControlBar>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaControlBar>`	-
`onScrollEnd?`	`UIEventHandler<MediaControlBar>`	-
`onScrollCapture?`	`UIEventHandler<MediaControlBar>`	-
`onScroll?`	`UIEventHandler<MediaControlBar>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerOut?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerOver?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerLeave?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerEnter?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerCancel?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerUp?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerMove?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaControlBar>`	-
`onPointerDown?`	`PointerEventHandler<MediaControlBar>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaControlBar>`	-
`onTouchStart?`	`TouchEventHandler<MediaControlBar>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaControlBar>`	-
`onTouchMove?`	`TouchEventHandler<MediaControlBar>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaControlBar>`	-
`onTouchEnd?`	`TouchEventHandler<MediaControlBar>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaControlBar>`	-
`onTouchCancel?`	`TouchEventHandler<MediaControlBar>`	-
`onSelectCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onSelect?`	`ReactEventHandler<MediaControlBar>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseUp?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseOver?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseOut?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseMove?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseLeave?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseEnter?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onMouseDown?`	`MouseEventHandler<MediaControlBar>`	-
`onDropCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDrop?`	`DragEventHandler<MediaControlBar>`	-
`onDragStartCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDragStart?`	`DragEventHandler<MediaControlBar>`	-
`onDragOverCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDragOver?`	`DragEventHandler<MediaControlBar>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDragLeave?`	`DragEventHandler<MediaControlBar>`	-
`onDragExitCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDragExit?`	`DragEventHandler<MediaControlBar>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDragEnter?`	`DragEventHandler<MediaControlBar>`	-
`onDragEndCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDragEnd?`	`DragEventHandler<MediaControlBar>`	-
`onDragCapture?`	`DragEventHandler<MediaControlBar>`	-
`onDrag?`	`DragEventHandler<MediaControlBar>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onDoubleClick?`	`MouseEventHandler<MediaControlBar>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onContextMenu?`	`MouseEventHandler<MediaControlBar>`	-
`onClickCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onClick?`	`MouseEventHandler<MediaControlBar>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaControlBar>`	-
`onAuxClick?`	`MouseEventHandler<MediaControlBar>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onWaiting?`	`ReactEventHandler<MediaControlBar>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onVolumeChange?`	`ReactEventHandler<MediaControlBar>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaControlBar>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onSuspend?`	`ReactEventHandler<MediaControlBar>`	-
`onStalledCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onStalled?`	`ReactEventHandler<MediaControlBar>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onSeeking?`	`ReactEventHandler<MediaControlBar>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onSeeked?`	`ReactEventHandler<MediaControlBar>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onRateChange?`	`ReactEventHandler<MediaControlBar>`	-
`onProgressCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onProgress?`	`ReactEventHandler<MediaControlBar>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onPlaying?`	`ReactEventHandler<MediaControlBar>`	-
`onPlayCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onPlay?`	`ReactEventHandler<MediaControlBar>`	-
`onPauseCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onPause?`	`ReactEventHandler<MediaControlBar>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onLoadStart?`	`ReactEventHandler<MediaControlBar>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaControlBar>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onLoadedData?`	`ReactEventHandler<MediaControlBar>`	-
`onEndedCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onEnded?`	`ReactEventHandler<MediaControlBar>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onEncrypted?`	`ReactEventHandler<MediaControlBar>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onEmptied?`	`ReactEventHandler<MediaControlBar>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onDurationChange?`	`ReactEventHandler<MediaControlBar>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaControlBar>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onCanPlay?`	`ReactEventHandler<MediaControlBar>`	-
`onAbortCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onAbort?`	`ReactEventHandler<MediaControlBar>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaControlBar>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaControlBar>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaControlBar>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaControlBar>`	-
`onErrorCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onError?`	`ReactEventHandler<MediaControlBar>`	-
`onLoadCapture?`	`ReactEventHandler<MediaControlBar>`	-
`onLoad?`	`ReactEventHandler<MediaControlBar>`	-
`onInvalidCapture?`	`FormEventHandler<MediaControlBar>`	-
`onInvalid?`	`FormEventHandler<MediaControlBar>`	-
`onSubmitCapture?`	`FormEventHandler<MediaControlBar>`	-
`onSubmit?`	`FormEventHandler<MediaControlBar>`	-
`onResetCapture?`	`FormEventHandler<MediaControlBar>`	-
`onReset?`	`FormEventHandler<MediaControlBar>`	-
`onInputCapture?`	`FormEventHandler<MediaControlBar>`	-
`onInput?`	`FormEventHandler<MediaControlBar>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaControlBar>`	-
`onBeforeInput?`	`FormEventHandler<MediaControlBar>`	-
`onChangeCapture?`	`FormEventHandler<MediaControlBar>`	-
`onChange?`	`FormEventHandler<MediaControlBar>`	-
`onBlurCapture?`	`FocusEventHandler<MediaControlBar>`	-
`onBlur?`	`FocusEventHandler<MediaControlBar>`	-
`onFocusCapture?`	`FocusEventHandler<MediaControlBar>`	-
`onFocus?`	`FocusEventHandler<MediaControlBar>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaControlBar>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaControlBar>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaControlBar>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaControlBar>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaControlBar>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaControlBar>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaControlBar>`	-
`onPaste?`	`ClipboardEventHandler<MediaControlBar>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaControlBar>`	-
`onCut?`	`ClipboardEventHandler<MediaControlBar>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaControlBar>`	-
`onCopy?`	`ClipboardEventHandler<MediaControlBar>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaControlBar>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaControlBar>`	-

VideoPlayerMuteButton

The VideoPlayerMuteButton component is used to mute/unmute the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaMuteButton>`	-
`noTooltip?`	`boolean`	-
`disabled?`	`boolean`	-
`mediaController?`	`string`	-
`tooltipPlacement?`	`TooltipPlacement`	-
`keysUsed?`	`string[]`	-
`disable?`	`(() => void)`	-
`enable?`	`(() => void)`	-
`tooltipContent?`	`string`	-
`tooltipEl?`	`MediaTooltip`	-
`nativeEl?`	`DocumentFragment`	-
`preventClick?`	`boolean`	-
`handleClick?`	`(() => void)`	-
`mediaVolumeLevel?`	`string`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaMuteButton>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaMuteButton>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaMuteButton>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaMuteButton>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaMuteButton>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaMuteButton>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaMuteButton>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaMuteButton>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaMuteButton>`	-
`onToggle?`	`ToggleEventHandler<MediaMuteButton>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaMuteButton>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaMuteButton>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaMuteButton>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaMuteButton>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaMuteButton>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaMuteButton>`	-
`onWheelCapture?`	`WheelEventHandler<MediaMuteButton>`	-
`onWheel?`	`WheelEventHandler<MediaMuteButton>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaMuteButton>`	-
`onScrollEnd?`	`UIEventHandler<MediaMuteButton>`	-
`onScrollCapture?`	`UIEventHandler<MediaMuteButton>`	-
`onScroll?`	`UIEventHandler<MediaMuteButton>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerOut?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerOver?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerLeave?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerEnter?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerCancel?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerUp?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerMove?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaMuteButton>`	-
`onPointerDown?`	`PointerEventHandler<MediaMuteButton>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaMuteButton>`	-
`onTouchStart?`	`TouchEventHandler<MediaMuteButton>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaMuteButton>`	-
`onTouchMove?`	`TouchEventHandler<MediaMuteButton>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaMuteButton>`	-
`onTouchEnd?`	`TouchEventHandler<MediaMuteButton>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaMuteButton>`	-
`onTouchCancel?`	`TouchEventHandler<MediaMuteButton>`	-
`onSelectCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onSelect?`	`ReactEventHandler<MediaMuteButton>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseUp?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseOver?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseOut?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseMove?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseLeave?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseEnter?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onMouseDown?`	`MouseEventHandler<MediaMuteButton>`	-
`onDropCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDrop?`	`DragEventHandler<MediaMuteButton>`	-
`onDragStartCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDragStart?`	`DragEventHandler<MediaMuteButton>`	-
`onDragOverCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDragOver?`	`DragEventHandler<MediaMuteButton>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDragLeave?`	`DragEventHandler<MediaMuteButton>`	-
`onDragExitCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDragExit?`	`DragEventHandler<MediaMuteButton>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDragEnter?`	`DragEventHandler<MediaMuteButton>`	-
`onDragEndCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDragEnd?`	`DragEventHandler<MediaMuteButton>`	-
`onDragCapture?`	`DragEventHandler<MediaMuteButton>`	-
`onDrag?`	`DragEventHandler<MediaMuteButton>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onDoubleClick?`	`MouseEventHandler<MediaMuteButton>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onContextMenu?`	`MouseEventHandler<MediaMuteButton>`	-
`onClickCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onClick?`	`MouseEventHandler<MediaMuteButton>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaMuteButton>`	-
`onAuxClick?`	`MouseEventHandler<MediaMuteButton>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onWaiting?`	`ReactEventHandler<MediaMuteButton>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onVolumeChange?`	`ReactEventHandler<MediaMuteButton>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaMuteButton>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onSuspend?`	`ReactEventHandler<MediaMuteButton>`	-
`onStalledCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onStalled?`	`ReactEventHandler<MediaMuteButton>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onSeeking?`	`ReactEventHandler<MediaMuteButton>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onSeeked?`	`ReactEventHandler<MediaMuteButton>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onRateChange?`	`ReactEventHandler<MediaMuteButton>`	-
`onProgressCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onProgress?`	`ReactEventHandler<MediaMuteButton>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onPlaying?`	`ReactEventHandler<MediaMuteButton>`	-
`onPlayCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onPlay?`	`ReactEventHandler<MediaMuteButton>`	-
`onPauseCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onPause?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoadStart?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoadedData?`	`ReactEventHandler<MediaMuteButton>`	-
`onEndedCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onEnded?`	`ReactEventHandler<MediaMuteButton>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onEncrypted?`	`ReactEventHandler<MediaMuteButton>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onEmptied?`	`ReactEventHandler<MediaMuteButton>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onDurationChange?`	`ReactEventHandler<MediaMuteButton>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaMuteButton>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onCanPlay?`	`ReactEventHandler<MediaMuteButton>`	-
`onAbortCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onAbort?`	`ReactEventHandler<MediaMuteButton>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaMuteButton>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaMuteButton>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaMuteButton>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaMuteButton>`	-
`onErrorCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onError?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoadCapture?`	`ReactEventHandler<MediaMuteButton>`	-
`onLoad?`	`ReactEventHandler<MediaMuteButton>`	-
`onInvalidCapture?`	`FormEventHandler<MediaMuteButton>`	-
`onInvalid?`	`FormEventHandler<MediaMuteButton>`	-
`onSubmitCapture?`	`FormEventHandler<MediaMuteButton>`	-
`onSubmit?`	`FormEventHandler<MediaMuteButton>`	-
`onResetCapture?`	`FormEventHandler<MediaMuteButton>`	-
`onReset?`	`FormEventHandler<MediaMuteButton>`	-
`onInputCapture?`	`FormEventHandler<MediaMuteButton>`	-
`onInput?`	`FormEventHandler<MediaMuteButton>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaMuteButton>`	-
`onBeforeInput?`	`FormEventHandler<MediaMuteButton>`	-
`onChangeCapture?`	`FormEventHandler<MediaMuteButton>`	-
`onChange?`	`FormEventHandler<MediaMuteButton>`	-
`onBlurCapture?`	`FocusEventHandler<MediaMuteButton>`	-
`onBlur?`	`FocusEventHandler<MediaMuteButton>`	-
`onFocusCapture?`	`FocusEventHandler<MediaMuteButton>`	-
`onFocus?`	`FocusEventHandler<MediaMuteButton>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaMuteButton>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaMuteButton>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaMuteButton>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaMuteButton>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaMuteButton>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaMuteButton>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaMuteButton>`	-
`onPaste?`	`ClipboardEventHandler<MediaMuteButton>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaMuteButton>`	-
`onCut?`	`ClipboardEventHandler<MediaMuteButton>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaMuteButton>`	-
`onCopy?`	`ClipboardEventHandler<MediaMuteButton>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaMuteButton>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaMuteButton>`	-

VideoPlayerPlayButton

The VideoPlayerPlayButton component is used to play/pause the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaPlayButton>`	-
`noTooltip?`	`boolean`	-
`disabled?`	`boolean`	-
`mediaController?`	`string`	-
`tooltipPlacement?`	`TooltipPlacement`	-
`keysUsed?`	`string[]`	-
`disable?`	`(() => void)`	-
`enable?`	`(() => void)`	-
`tooltipContent?`	`string`	-
`tooltipEl?`	`MediaTooltip`	-
`nativeEl?`	`DocumentFragment`	-
`preventClick?`	`boolean`	-
`handleClick?`	`(() => void)`	-
`mediaPaused?`	`boolean`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaPlayButton>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaPlayButton>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaPlayButton>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaPlayButton>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaPlayButton>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaPlayButton>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaPlayButton>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaPlayButton>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaPlayButton>`	-
`onToggle?`	`ToggleEventHandler<MediaPlayButton>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaPlayButton>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaPlayButton>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaPlayButton>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaPlayButton>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaPlayButton>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaPlayButton>`	-
`onWheelCapture?`	`WheelEventHandler<MediaPlayButton>`	-
`onWheel?`	`WheelEventHandler<MediaPlayButton>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaPlayButton>`	-
`onScrollEnd?`	`UIEventHandler<MediaPlayButton>`	-
`onScrollCapture?`	`UIEventHandler<MediaPlayButton>`	-
`onScroll?`	`UIEventHandler<MediaPlayButton>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerOut?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerOver?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerLeave?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerEnter?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerCancel?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerUp?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerMove?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaPlayButton>`	-
`onPointerDown?`	`PointerEventHandler<MediaPlayButton>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaPlayButton>`	-
`onTouchStart?`	`TouchEventHandler<MediaPlayButton>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaPlayButton>`	-
`onTouchMove?`	`TouchEventHandler<MediaPlayButton>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaPlayButton>`	-
`onTouchEnd?`	`TouchEventHandler<MediaPlayButton>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaPlayButton>`	-
`onTouchCancel?`	`TouchEventHandler<MediaPlayButton>`	-
`onSelectCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onSelect?`	`ReactEventHandler<MediaPlayButton>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseUp?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseOver?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseOut?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseMove?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseLeave?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseEnter?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onMouseDown?`	`MouseEventHandler<MediaPlayButton>`	-
`onDropCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDrop?`	`DragEventHandler<MediaPlayButton>`	-
`onDragStartCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDragStart?`	`DragEventHandler<MediaPlayButton>`	-
`onDragOverCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDragOver?`	`DragEventHandler<MediaPlayButton>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDragLeave?`	`DragEventHandler<MediaPlayButton>`	-
`onDragExitCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDragExit?`	`DragEventHandler<MediaPlayButton>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDragEnter?`	`DragEventHandler<MediaPlayButton>`	-
`onDragEndCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDragEnd?`	`DragEventHandler<MediaPlayButton>`	-
`onDragCapture?`	`DragEventHandler<MediaPlayButton>`	-
`onDrag?`	`DragEventHandler<MediaPlayButton>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onDoubleClick?`	`MouseEventHandler<MediaPlayButton>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onContextMenu?`	`MouseEventHandler<MediaPlayButton>`	-
`onClickCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onClick?`	`MouseEventHandler<MediaPlayButton>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaPlayButton>`	-
`onAuxClick?`	`MouseEventHandler<MediaPlayButton>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onWaiting?`	`ReactEventHandler<MediaPlayButton>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onVolumeChange?`	`ReactEventHandler<MediaPlayButton>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaPlayButton>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onSuspend?`	`ReactEventHandler<MediaPlayButton>`	-
`onStalledCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onStalled?`	`ReactEventHandler<MediaPlayButton>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onSeeking?`	`ReactEventHandler<MediaPlayButton>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onSeeked?`	`ReactEventHandler<MediaPlayButton>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onRateChange?`	`ReactEventHandler<MediaPlayButton>`	-
`onProgressCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onProgress?`	`ReactEventHandler<MediaPlayButton>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onPlaying?`	`ReactEventHandler<MediaPlayButton>`	-
`onPlayCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onPlay?`	`ReactEventHandler<MediaPlayButton>`	-
`onPauseCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onPause?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoadStart?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoadedData?`	`ReactEventHandler<MediaPlayButton>`	-
`onEndedCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onEnded?`	`ReactEventHandler<MediaPlayButton>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onEncrypted?`	`ReactEventHandler<MediaPlayButton>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onEmptied?`	`ReactEventHandler<MediaPlayButton>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onDurationChange?`	`ReactEventHandler<MediaPlayButton>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaPlayButton>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onCanPlay?`	`ReactEventHandler<MediaPlayButton>`	-
`onAbortCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onAbort?`	`ReactEventHandler<MediaPlayButton>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaPlayButton>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaPlayButton>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaPlayButton>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaPlayButton>`	-
`onErrorCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onError?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoadCapture?`	`ReactEventHandler<MediaPlayButton>`	-
`onLoad?`	`ReactEventHandler<MediaPlayButton>`	-
`onInvalidCapture?`	`FormEventHandler<MediaPlayButton>`	-
`onInvalid?`	`FormEventHandler<MediaPlayButton>`	-
`onSubmitCapture?`	`FormEventHandler<MediaPlayButton>`	-
`onSubmit?`	`FormEventHandler<MediaPlayButton>`	-
`onResetCapture?`	`FormEventHandler<MediaPlayButton>`	-
`onReset?`	`FormEventHandler<MediaPlayButton>`	-
`onInputCapture?`	`FormEventHandler<MediaPlayButton>`	-
`onInput?`	`FormEventHandler<MediaPlayButton>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaPlayButton>`	-
`onBeforeInput?`	`FormEventHandler<MediaPlayButton>`	-
`onChangeCapture?`	`FormEventHandler<MediaPlayButton>`	-
`onChange?`	`FormEventHandler<MediaPlayButton>`	-
`onBlurCapture?`	`FocusEventHandler<MediaPlayButton>`	-
`onBlur?`	`FocusEventHandler<MediaPlayButton>`	-
`onFocusCapture?`	`FocusEventHandler<MediaPlayButton>`	-
`onFocus?`	`FocusEventHandler<MediaPlayButton>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaPlayButton>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaPlayButton>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaPlayButton>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaPlayButton>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaPlayButton>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaPlayButton>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaPlayButton>`	-
`onPaste?`	`ClipboardEventHandler<MediaPlayButton>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaPlayButton>`	-
`onCut?`	`ClipboardEventHandler<MediaPlayButton>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaPlayButton>`	-
`onCopy?`	`ClipboardEventHandler<MediaPlayButton>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaPlayButton>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaPlayButton>`	-

VideoPlayerSeekBackwardButton

The VideoPlayerSeekBackwardButton component is used to seek backward in the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaSeekBackwardButton>`	-
`noTooltip?`	`boolean`	-
`disabled?`	`boolean`	-
`mediaController?`	`string`	-
`tooltipPlacement?`	`TooltipPlacement`	-
`keysUsed?`	`string[]`	-
`disable?`	`(() => void)`	-
`enable?`	`(() => void)`	-
`tooltipContent?`	`string`	-
`tooltipEl?`	`MediaTooltip`	-
`nativeEl?`	`DocumentFragment`	-
`preventClick?`	`boolean`	-
`handleClick?`	`(() => void)`	-
`mediaCurrentTime?`	`number`	-
`seekOffset?`	`number`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaSeekBackwardButton>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaSeekBackwardButton>`	-
`onToggle?`	`ToggleEventHandler<MediaSeekBackwardButton>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaSeekBackwardButton>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaSeekBackwardButton>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaSeekBackwardButton>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaSeekBackwardButton>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaSeekBackwardButton>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaSeekBackwardButton>`	-
`onWheelCapture?`	`WheelEventHandler<MediaSeekBackwardButton>`	-
`onWheel?`	`WheelEventHandler<MediaSeekBackwardButton>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaSeekBackwardButton>`	-
`onScrollEnd?`	`UIEventHandler<MediaSeekBackwardButton>`	-
`onScrollCapture?`	`UIEventHandler<MediaSeekBackwardButton>`	-
`onScroll?`	`UIEventHandler<MediaSeekBackwardButton>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerOut?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerOver?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerLeave?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerEnter?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerCancel?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerUp?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerMove?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onPointerDown?`	`PointerEventHandler<MediaSeekBackwardButton>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onTouchStart?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onTouchMove?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onTouchEnd?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onTouchCancel?`	`TouchEventHandler<MediaSeekBackwardButton>`	-
`onSelectCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onSelect?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseUp?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseOver?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseOut?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseMove?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseLeave?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseEnter?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onMouseDown?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onDropCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDrop?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragStartCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragStart?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragOverCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragOver?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragLeave?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragExitCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragExit?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragEnter?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragEndCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragEnd?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDragCapture?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDrag?`	`DragEventHandler<MediaSeekBackwardButton>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onDoubleClick?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onContextMenu?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onClickCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onClick?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onAuxClick?`	`MouseEventHandler<MediaSeekBackwardButton>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onWaiting?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onVolumeChange?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onSuspend?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onStalledCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onStalled?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onSeeking?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onSeeked?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onRateChange?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onProgressCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onProgress?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onPlaying?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onPlayCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onPlay?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onPauseCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onPause?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoadStart?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoadedData?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onEndedCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onEnded?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onEncrypted?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onEmptied?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onDurationChange?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onCanPlay?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onAbortCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onAbort?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaSeekBackwardButton>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaSeekBackwardButton>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaSeekBackwardButton>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaSeekBackwardButton>`	-
`onErrorCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onError?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoadCapture?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onLoad?`	`ReactEventHandler<MediaSeekBackwardButton>`	-
`onInvalidCapture?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onInvalid?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onSubmitCapture?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onSubmit?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onResetCapture?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onReset?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onInputCapture?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onInput?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onBeforeInput?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onChangeCapture?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onChange?`	`FormEventHandler<MediaSeekBackwardButton>`	-
`onBlurCapture?`	`FocusEventHandler<MediaSeekBackwardButton>`	-
`onBlur?`	`FocusEventHandler<MediaSeekBackwardButton>`	-
`onFocusCapture?`	`FocusEventHandler<MediaSeekBackwardButton>`	-
`onFocus?`	`FocusEventHandler<MediaSeekBackwardButton>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaSeekBackwardButton>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaSeekBackwardButton>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaSeekBackwardButton>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaSeekBackwardButton>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaSeekBackwardButton>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaSeekBackwardButton>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaSeekBackwardButton>`	-
`onPaste?`	`ClipboardEventHandler<MediaSeekBackwardButton>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaSeekBackwardButton>`	-
`onCut?`	`ClipboardEventHandler<MediaSeekBackwardButton>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaSeekBackwardButton>`	-
`onCopy?`	`ClipboardEventHandler<MediaSeekBackwardButton>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaSeekBackwardButton>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaSeekBackwardButton>`	-

VideoPlayerSeekForwardButton

The VideoPlayerSeekForwardButton component is used to seek forward in the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaSeekForwardButton>`	-
`noTooltip?`	`boolean`	-
`disabled?`	`boolean`	-
`mediaController?`	`string`	-
`tooltipPlacement?`	`TooltipPlacement`	-
`keysUsed?`	`string[]`	-
`disable?`	`(() => void)`	-
`enable?`	`(() => void)`	-
`tooltipContent?`	`string`	-
`tooltipEl?`	`MediaTooltip`	-
`nativeEl?`	`DocumentFragment`	-
`preventClick?`	`boolean`	-
`handleClick?`	`(() => void)`	-
`mediaCurrentTime?`	`number`	-
`seekOffset?`	`number`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaSeekForwardButton>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaSeekForwardButton>`	-
`onToggle?`	`ToggleEventHandler<MediaSeekForwardButton>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaSeekForwardButton>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaSeekForwardButton>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaSeekForwardButton>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaSeekForwardButton>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaSeekForwardButton>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaSeekForwardButton>`	-
`onWheelCapture?`	`WheelEventHandler<MediaSeekForwardButton>`	-
`onWheel?`	`WheelEventHandler<MediaSeekForwardButton>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaSeekForwardButton>`	-
`onScrollEnd?`	`UIEventHandler<MediaSeekForwardButton>`	-
`onScrollCapture?`	`UIEventHandler<MediaSeekForwardButton>`	-
`onScroll?`	`UIEventHandler<MediaSeekForwardButton>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerOut?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerOver?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerLeave?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerEnter?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerCancel?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerUp?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerMove?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onPointerDown?`	`PointerEventHandler<MediaSeekForwardButton>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onTouchStart?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onTouchMove?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onTouchEnd?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onTouchCancel?`	`TouchEventHandler<MediaSeekForwardButton>`	-
`onSelectCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onSelect?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseUp?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseOver?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseOut?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseMove?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseLeave?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseEnter?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onMouseDown?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onDropCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDrop?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragStartCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragStart?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragOverCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragOver?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragLeave?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragExitCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragExit?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragEnter?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragEndCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragEnd?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDragCapture?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDrag?`	`DragEventHandler<MediaSeekForwardButton>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onDoubleClick?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onContextMenu?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onClickCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onClick?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onAuxClick?`	`MouseEventHandler<MediaSeekForwardButton>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onWaiting?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onVolumeChange?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onSuspend?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onStalledCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onStalled?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onSeeking?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onSeeked?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onRateChange?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onProgressCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onProgress?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onPlaying?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onPlayCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onPlay?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onPauseCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onPause?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoadStart?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoadedData?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onEndedCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onEnded?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onEncrypted?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onEmptied?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onDurationChange?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onCanPlay?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onAbortCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onAbort?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaSeekForwardButton>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaSeekForwardButton>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaSeekForwardButton>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaSeekForwardButton>`	-
`onErrorCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onError?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoadCapture?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onLoad?`	`ReactEventHandler<MediaSeekForwardButton>`	-
`onInvalidCapture?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onInvalid?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onSubmitCapture?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onSubmit?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onResetCapture?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onReset?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onInputCapture?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onInput?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onBeforeInput?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onChangeCapture?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onChange?`	`FormEventHandler<MediaSeekForwardButton>`	-
`onBlurCapture?`	`FocusEventHandler<MediaSeekForwardButton>`	-
`onBlur?`	`FocusEventHandler<MediaSeekForwardButton>`	-
`onFocusCapture?`	`FocusEventHandler<MediaSeekForwardButton>`	-
`onFocus?`	`FocusEventHandler<MediaSeekForwardButton>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaSeekForwardButton>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaSeekForwardButton>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaSeekForwardButton>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaSeekForwardButton>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaSeekForwardButton>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaSeekForwardButton>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaSeekForwardButton>`	-
`onPaste?`	`ClipboardEventHandler<MediaSeekForwardButton>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaSeekForwardButton>`	-
`onCut?`	`ClipboardEventHandler<MediaSeekForwardButton>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaSeekForwardButton>`	-
`onCopy?`	`ClipboardEventHandler<MediaSeekForwardButton>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaSeekForwardButton>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaSeekForwardButton>`	-

VideoPlayerTimeDisplay

The VideoPlayerTimeDisplay component is used to display the current time of the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaTimeDisplay>`	-
`update?`	`(() => void)`	-
`mediaSeekable?`	`[number, number]`	-
`mediaCurrentTime?`	`number`	-
`mediaDuration?`	`number`	-
`noToggle?`	`boolean`	-
`showDuration?`	`boolean`	-
`remaining?`	`boolean`	-
`disable?`	`(() => void)`	-
`enable?`	`(() => void)`	-
`toggleTimeDisplay?`	`(() => void)`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaTimeDisplay>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaTimeDisplay>`	-
`onToggle?`	`ToggleEventHandler<MediaTimeDisplay>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaTimeDisplay>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaTimeDisplay>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaTimeDisplay>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaTimeDisplay>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaTimeDisplay>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaTimeDisplay>`	-
`onWheelCapture?`	`WheelEventHandler<MediaTimeDisplay>`	-
`onWheel?`	`WheelEventHandler<MediaTimeDisplay>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaTimeDisplay>`	-
`onScrollEnd?`	`UIEventHandler<MediaTimeDisplay>`	-
`onScrollCapture?`	`UIEventHandler<MediaTimeDisplay>`	-
`onScroll?`	`UIEventHandler<MediaTimeDisplay>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerOut?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerOver?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerLeave?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerEnter?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerCancel?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerUp?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerMove?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onPointerDown?`	`PointerEventHandler<MediaTimeDisplay>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onTouchStart?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onTouchMove?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onTouchEnd?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onTouchCancel?`	`TouchEventHandler<MediaTimeDisplay>`	-
`onSelectCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onSelect?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseUp?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseOver?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseOut?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseMove?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseLeave?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseEnter?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onMouseDown?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onDropCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDrop?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragStartCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragStart?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragOverCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragOver?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragLeave?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragExitCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragExit?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragEnter?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragEndCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragEnd?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDragCapture?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDrag?`	`DragEventHandler<MediaTimeDisplay>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onDoubleClick?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onContextMenu?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onClickCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onClick?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onAuxClick?`	`MouseEventHandler<MediaTimeDisplay>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onWaiting?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onVolumeChange?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onSuspend?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onStalledCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onStalled?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onSeeking?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onSeeked?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onRateChange?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onProgressCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onProgress?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onPlaying?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onPlayCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onPlay?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onPauseCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onPause?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoadStart?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoadedData?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onEndedCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onEnded?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onEncrypted?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onEmptied?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onDurationChange?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onCanPlay?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onAbortCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onAbort?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaTimeDisplay>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaTimeDisplay>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaTimeDisplay>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaTimeDisplay>`	-
`onErrorCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onError?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoadCapture?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onLoad?`	`ReactEventHandler<MediaTimeDisplay>`	-
`onInvalidCapture?`	`FormEventHandler<MediaTimeDisplay>`	-
`onInvalid?`	`FormEventHandler<MediaTimeDisplay>`	-
`onSubmitCapture?`	`FormEventHandler<MediaTimeDisplay>`	-
`onSubmit?`	`FormEventHandler<MediaTimeDisplay>`	-
`onResetCapture?`	`FormEventHandler<MediaTimeDisplay>`	-
`onReset?`	`FormEventHandler<MediaTimeDisplay>`	-
`onInputCapture?`	`FormEventHandler<MediaTimeDisplay>`	-
`onInput?`	`FormEventHandler<MediaTimeDisplay>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaTimeDisplay>`	-
`onBeforeInput?`	`FormEventHandler<MediaTimeDisplay>`	-
`onChangeCapture?`	`FormEventHandler<MediaTimeDisplay>`	-
`onChange?`	`FormEventHandler<MediaTimeDisplay>`	-
`onBlurCapture?`	`FocusEventHandler<MediaTimeDisplay>`	-
`onBlur?`	`FocusEventHandler<MediaTimeDisplay>`	-
`onFocusCapture?`	`FocusEventHandler<MediaTimeDisplay>`	-
`onFocus?`	`FocusEventHandler<MediaTimeDisplay>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaTimeDisplay>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaTimeDisplay>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaTimeDisplay>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaTimeDisplay>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaTimeDisplay>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaTimeDisplay>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaTimeDisplay>`	-
`onPaste?`	`ClipboardEventHandler<MediaTimeDisplay>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaTimeDisplay>`	-
`onCut?`	`ClipboardEventHandler<MediaTimeDisplay>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaTimeDisplay>`	-
`onCopy?`	`ClipboardEventHandler<MediaTimeDisplay>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaTimeDisplay>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaTimeDisplay>`	-

VideoPlayerTimeRange

The VideoPlayerTimeRange component is used to control the time of the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaTimeRange>`	-
`keysUsed?`	`string[]`	-
`dragging?`	`boolean`	-
`getPointerRatio?`	`((evt: any) => number)`	-
`updateSegments?`	`((segments: any) => void)`	-
`updatePointerBar?`	`((evt: any) => void)`	-
`appearance?`	`HTMLElement`	-
`range?`	`HTMLInputElement`	-
`container?`	`HTMLElement`	-
`handleEvent?`	`((evt: Event \| MouseEvent) => void)`	-
`updateCurrentBox?`	`(() => void)`	-
`updateBufferedBar?`	`(() => void)`	-
`updateBar?`	`(() => void)`	-
`mediaEnded?`	`boolean`	-
`mediaPreviewTime?`	`number`	-
`mediaPreviewImage?`	`string`	-
`mediaSeekableStart?`	`number`	-
`mediaSeekableEnd?`	`number`	-
`mediaSeekable?`	`number[]`	-
`mediaBuffered?`	`number[][]`	-
`mediaPlaybackRate?`	`number`	-
`mediaCurrentTime?`	`number`	-
`mediaDuration?`	`number`	-
`mediaLoading?`	`boolean`	-
`mediaPaused?`	`boolean`	-
`mediaChaptersCues?`	`any[]`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaTimeRange>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaTimeRange>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaTimeRange>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaTimeRange>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaTimeRange>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaTimeRange>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaTimeRange>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaTimeRange>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaTimeRange>`	-
`onToggle?`	`ToggleEventHandler<MediaTimeRange>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaTimeRange>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaTimeRange>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaTimeRange>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaTimeRange>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaTimeRange>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaTimeRange>`	-
`onWheelCapture?`	`WheelEventHandler<MediaTimeRange>`	-
`onWheel?`	`WheelEventHandler<MediaTimeRange>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaTimeRange>`	-
`onScrollEnd?`	`UIEventHandler<MediaTimeRange>`	-
`onScrollCapture?`	`UIEventHandler<MediaTimeRange>`	-
`onScroll?`	`UIEventHandler<MediaTimeRange>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerOut?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerOver?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerLeave?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerEnter?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerCancel?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerUp?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerMove?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaTimeRange>`	-
`onPointerDown?`	`PointerEventHandler<MediaTimeRange>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaTimeRange>`	-
`onTouchStart?`	`TouchEventHandler<MediaTimeRange>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaTimeRange>`	-
`onTouchMove?`	`TouchEventHandler<MediaTimeRange>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaTimeRange>`	-
`onTouchEnd?`	`TouchEventHandler<MediaTimeRange>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaTimeRange>`	-
`onTouchCancel?`	`TouchEventHandler<MediaTimeRange>`	-
`onSelectCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onSelect?`	`ReactEventHandler<MediaTimeRange>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseUp?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseOver?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseOut?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseMove?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseLeave?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseEnter?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onMouseDown?`	`MouseEventHandler<MediaTimeRange>`	-
`onDropCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDrop?`	`DragEventHandler<MediaTimeRange>`	-
`onDragStartCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDragStart?`	`DragEventHandler<MediaTimeRange>`	-
`onDragOverCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDragOver?`	`DragEventHandler<MediaTimeRange>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDragLeave?`	`DragEventHandler<MediaTimeRange>`	-
`onDragExitCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDragExit?`	`DragEventHandler<MediaTimeRange>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDragEnter?`	`DragEventHandler<MediaTimeRange>`	-
`onDragEndCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDragEnd?`	`DragEventHandler<MediaTimeRange>`	-
`onDragCapture?`	`DragEventHandler<MediaTimeRange>`	-
`onDrag?`	`DragEventHandler<MediaTimeRange>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onDoubleClick?`	`MouseEventHandler<MediaTimeRange>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onContextMenu?`	`MouseEventHandler<MediaTimeRange>`	-
`onClickCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onClick?`	`MouseEventHandler<MediaTimeRange>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaTimeRange>`	-
`onAuxClick?`	`MouseEventHandler<MediaTimeRange>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onWaiting?`	`ReactEventHandler<MediaTimeRange>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onVolumeChange?`	`ReactEventHandler<MediaTimeRange>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaTimeRange>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onSuspend?`	`ReactEventHandler<MediaTimeRange>`	-
`onStalledCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onStalled?`	`ReactEventHandler<MediaTimeRange>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onSeeking?`	`ReactEventHandler<MediaTimeRange>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onSeeked?`	`ReactEventHandler<MediaTimeRange>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onRateChange?`	`ReactEventHandler<MediaTimeRange>`	-
`onProgressCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onProgress?`	`ReactEventHandler<MediaTimeRange>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onPlaying?`	`ReactEventHandler<MediaTimeRange>`	-
`onPlayCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onPlay?`	`ReactEventHandler<MediaTimeRange>`	-
`onPauseCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onPause?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoadStart?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoadedData?`	`ReactEventHandler<MediaTimeRange>`	-
`onEndedCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onEnded?`	`ReactEventHandler<MediaTimeRange>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onEncrypted?`	`ReactEventHandler<MediaTimeRange>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onEmptied?`	`ReactEventHandler<MediaTimeRange>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onDurationChange?`	`ReactEventHandler<MediaTimeRange>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaTimeRange>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onCanPlay?`	`ReactEventHandler<MediaTimeRange>`	-
`onAbortCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onAbort?`	`ReactEventHandler<MediaTimeRange>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaTimeRange>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaTimeRange>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaTimeRange>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaTimeRange>`	-
`onErrorCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onError?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoadCapture?`	`ReactEventHandler<MediaTimeRange>`	-
`onLoad?`	`ReactEventHandler<MediaTimeRange>`	-
`onInvalidCapture?`	`FormEventHandler<MediaTimeRange>`	-
`onInvalid?`	`FormEventHandler<MediaTimeRange>`	-
`onSubmitCapture?`	`FormEventHandler<MediaTimeRange>`	-
`onSubmit?`	`FormEventHandler<MediaTimeRange>`	-
`onResetCapture?`	`FormEventHandler<MediaTimeRange>`	-
`onReset?`	`FormEventHandler<MediaTimeRange>`	-
`onInputCapture?`	`FormEventHandler<MediaTimeRange>`	-
`onInput?`	`FormEventHandler<MediaTimeRange>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaTimeRange>`	-
`onBeforeInput?`	`FormEventHandler<MediaTimeRange>`	-
`onChangeCapture?`	`FormEventHandler<MediaTimeRange>`	-
`onChange?`	`FormEventHandler<MediaTimeRange>`	-
`onBlurCapture?`	`FocusEventHandler<MediaTimeRange>`	-
`onBlur?`	`FocusEventHandler<MediaTimeRange>`	-
`onFocusCapture?`	`FocusEventHandler<MediaTimeRange>`	-
`onFocus?`	`FocusEventHandler<MediaTimeRange>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaTimeRange>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaTimeRange>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaTimeRange>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaTimeRange>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaTimeRange>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaTimeRange>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaTimeRange>`	-
`onPaste?`	`ClipboardEventHandler<MediaTimeRange>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaTimeRange>`	-
`onCut?`	`ClipboardEventHandler<MediaTimeRange>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaTimeRange>`	-
`onCopy?`	`ClipboardEventHandler<MediaTimeRange>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaTimeRange>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaTimeRange>`	-

VideoPlayerVolumeRange

The VideoPlayerVolumeRange component is used to control the volume of the video player.

Prop	Type	Default
`key?`	`Key \| null`	-
`ref?`	`Ref<MediaVolumeRange>`	-
`keysUsed?`	`string[]`	-
`handleEvent?`	`((evt: any) => void)`	-
`dragging?`	`boolean`	-
`getPointerRatio?`	`((evt: any) => number)`	-
`updateSegments?`	`((segments: any) => void)`	-
`updateBar?`	`(() => void)`	-
`updatePointerBar?`	`((evt: any) => void)`	-
`appearance?`	`HTMLElement`	-
`range?`	`HTMLInputElement`	-
`container?`	`HTMLElement`	-
`mediaVolumeUnavailable?`	`string`	-
`mediaMuted?`	`boolean`	-
`mediaVolume?`	`number`	-
`onTransitionStartCapture?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onTransitionStart?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onTransitionRun?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onTransitionEnd?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onTransitionCancel?`	`TransitionEventHandler<MediaVolumeRange>`	-
`onBeforeToggle?`	`ToggleEventHandler<MediaVolumeRange>`	-
`onToggle?`	`ToggleEventHandler<MediaVolumeRange>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<MediaVolumeRange>`	-
`onAnimationIteration?`	`AnimationEventHandler<MediaVolumeRange>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<MediaVolumeRange>`	-
`onAnimationEnd?`	`AnimationEventHandler<MediaVolumeRange>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<MediaVolumeRange>`	-
`onAnimationStart?`	`AnimationEventHandler<MediaVolumeRange>`	-
`onWheelCapture?`	`WheelEventHandler<MediaVolumeRange>`	-
`onWheel?`	`WheelEventHandler<MediaVolumeRange>`	-
`onScrollEndCapture?`	`UIEventHandler<MediaVolumeRange>`	-
`onScrollEnd?`	`UIEventHandler<MediaVolumeRange>`	-
`onScrollCapture?`	`UIEventHandler<MediaVolumeRange>`	-
`onScroll?`	`UIEventHandler<MediaVolumeRange>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onLostPointerCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onGotPointerCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerOutCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerOut?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerOverCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerOver?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerLeave?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerEnter?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerCancelCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerCancel?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerUpCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerUp?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerMoveCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerMove?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerDownCapture?`	`PointerEventHandler<MediaVolumeRange>`	-
`onPointerDown?`	`PointerEventHandler<MediaVolumeRange>`	-
`onTouchStartCapture?`	`TouchEventHandler<MediaVolumeRange>`	-
`onTouchStart?`	`TouchEventHandler<MediaVolumeRange>`	-
`onTouchMoveCapture?`	`TouchEventHandler<MediaVolumeRange>`	-
`onTouchMove?`	`TouchEventHandler<MediaVolumeRange>`	-
`onTouchEndCapture?`	`TouchEventHandler<MediaVolumeRange>`	-
`onTouchEnd?`	`TouchEventHandler<MediaVolumeRange>`	-
`onTouchCancelCapture?`	`TouchEventHandler<MediaVolumeRange>`	-
`onTouchCancel?`	`TouchEventHandler<MediaVolumeRange>`	-
`onSelectCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onSelect?`	`ReactEventHandler<MediaVolumeRange>`	-
`onMouseUpCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseUp?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseOverCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseOver?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseOutCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseOut?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseMoveCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseMove?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseLeave?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseEnter?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseDownCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onMouseDown?`	`MouseEventHandler<MediaVolumeRange>`	-
`onDropCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDrop?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragStartCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragStart?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragOverCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragOver?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragLeaveCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragLeave?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragExitCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragExit?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragEnterCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragEnter?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragEndCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragEnd?`	`DragEventHandler<MediaVolumeRange>`	-
`onDragCapture?`	`DragEventHandler<MediaVolumeRange>`	-
`onDrag?`	`DragEventHandler<MediaVolumeRange>`	-
`onDoubleClickCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onDoubleClick?`	`MouseEventHandler<MediaVolumeRange>`	-
`onContextMenuCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onContextMenu?`	`MouseEventHandler<MediaVolumeRange>`	-
`onClickCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onClick?`	`MouseEventHandler<MediaVolumeRange>`	-
`onAuxClickCapture?`	`MouseEventHandler<MediaVolumeRange>`	-
`onAuxClick?`	`MouseEventHandler<MediaVolumeRange>`	-
`onWaitingCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onWaiting?`	`ReactEventHandler<MediaVolumeRange>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onVolumeChange?`	`ReactEventHandler<MediaVolumeRange>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onTimeUpdate?`	`ReactEventHandler<MediaVolumeRange>`	-
`onSuspendCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onSuspend?`	`ReactEventHandler<MediaVolumeRange>`	-
`onStalledCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onStalled?`	`ReactEventHandler<MediaVolumeRange>`	-
`onSeekingCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onSeeking?`	`ReactEventHandler<MediaVolumeRange>`	-
`onSeekedCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onSeeked?`	`ReactEventHandler<MediaVolumeRange>`	-
`onRateChangeCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onRateChange?`	`ReactEventHandler<MediaVolumeRange>`	-
`onProgressCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onProgress?`	`ReactEventHandler<MediaVolumeRange>`	-
`onPlayingCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onPlaying?`	`ReactEventHandler<MediaVolumeRange>`	-
`onPlayCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onPlay?`	`ReactEventHandler<MediaVolumeRange>`	-
`onPauseCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onPause?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoadStartCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoadStart?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoadedMetadata?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoadedDataCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoadedData?`	`ReactEventHandler<MediaVolumeRange>`	-
`onEndedCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onEnded?`	`ReactEventHandler<MediaVolumeRange>`	-
`onEncryptedCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onEncrypted?`	`ReactEventHandler<MediaVolumeRange>`	-
`onEmptiedCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onEmptied?`	`ReactEventHandler<MediaVolumeRange>`	-
`onDurationChangeCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onDurationChange?`	`ReactEventHandler<MediaVolumeRange>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onCanPlayThrough?`	`ReactEventHandler<MediaVolumeRange>`	-
`onCanPlayCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onCanPlay?`	`ReactEventHandler<MediaVolumeRange>`	-
`onAbortCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onAbort?`	`ReactEventHandler<MediaVolumeRange>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<MediaVolumeRange>`	-
`onKeyUp?`	`KeyboardEventHandler<MediaVolumeRange>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<MediaVolumeRange>`	-
`onKeyDown?`	`KeyboardEventHandler<MediaVolumeRange>`	-
`onErrorCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onError?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoadCapture?`	`ReactEventHandler<MediaVolumeRange>`	-
`onLoad?`	`ReactEventHandler<MediaVolumeRange>`	-
`onInvalidCapture?`	`FormEventHandler<MediaVolumeRange>`	-
`onInvalid?`	`FormEventHandler<MediaVolumeRange>`	-
`onSubmitCapture?`	`FormEventHandler<MediaVolumeRange>`	-
`onSubmit?`	`FormEventHandler<MediaVolumeRange>`	-
`onResetCapture?`	`FormEventHandler<MediaVolumeRange>`	-
`onReset?`	`FormEventHandler<MediaVolumeRange>`	-
`onInputCapture?`	`FormEventHandler<MediaVolumeRange>`	-
`onInput?`	`FormEventHandler<MediaVolumeRange>`	-
`onBeforeInputCapture?`	`FormEventHandler<MediaVolumeRange>`	-
`onBeforeInput?`	`FormEventHandler<MediaVolumeRange>`	-
`onChangeCapture?`	`FormEventHandler<MediaVolumeRange>`	-
`onChange?`	`FormEventHandler<MediaVolumeRange>`	-
`onBlurCapture?`	`FocusEventHandler<MediaVolumeRange>`	-
`onBlur?`	`FocusEventHandler<MediaVolumeRange>`	-
`onFocusCapture?`	`FocusEventHandler<MediaVolumeRange>`	-
`onFocus?`	`FocusEventHandler<MediaVolumeRange>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<MediaVolumeRange>`	-
`onCompositionUpdate?`	`CompositionEventHandler<MediaVolumeRange>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<MediaVolumeRange>`	-
`onCompositionStart?`	`CompositionEventHandler<MediaVolumeRange>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<MediaVolumeRange>`	-
`onCompositionEnd?`	`CompositionEventHandler<MediaVolumeRange>`	-
`onPasteCapture?`	`ClipboardEventHandler<MediaVolumeRange>`	-
`onPaste?`	`ClipboardEventHandler<MediaVolumeRange>`	-
`onCutCapture?`	`ClipboardEventHandler<MediaVolumeRange>`	-
`onCut?`	`ClipboardEventHandler<MediaVolumeRange>`	-
`onCopyCapture?`	`ClipboardEventHandler<MediaVolumeRange>`	-
`onCopy?`	`ClipboardEventHandler<MediaVolumeRange>`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`aria-valuetext?`	`string`	-
`aria-valuenow?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuemax?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-setsize?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-rowspan?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowindex?`	`number`	-
`aria-rowcount?`	`number`	-
`aria-roledescription?`	`string`	-
`aria-required?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-readonly?`	`Booleanish`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-posinset?`	`number`	-
`aria-placeholder?`	`string`	-
`aria-owns?`	`string`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-modal?`	`Booleanish`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-level?`	`number`	-
`aria-labelledby?`	`string`	-
`aria-label?`	`string`	-
`aria-keyshortcuts?`	`string`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-hidden?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-flowto?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-errormessage?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-details?`	`string`	-
`aria-description?`	`string`	-
`aria-describedby?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-controls?`	`string`	-
`aria-colspan?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colindex?`	`number`	-
`aria-colcount?`	`number`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-busy?`	`Booleanish`	-
`aria-brailleroledescription?`	`string`	-
`aria-braillelabel?`	`string`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-atomic?`	`Booleanish`	-
`aria-activedescendant?`	`string`	-
`exportparts?`	`string`	-
`is?`	`string`	-
`popoverTarget?`	`string`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`unselectable?`	`"off" \| "on"`	-
`security?`	`string`	-
`results?`	`number`	-
`itemRef?`	`string`	-
`itemID?`	`string`	-
`itemType?`	`string`	-
`itemScope?`	`boolean`	-
`itemProp?`	`string`	-
`color?`	`string`	-
`autoSave?`	`string`	-
`autoCorrect?`	`string`	-
`vocab?`	`string`	-
`typeof?`	`string`	-
`rev?`	`string`	-
`resource?`	`string`	-
`rel?`	`string`	-
`property?`	`string`	-
`inlist?`	`any`	-
`datatype?`	`string`	-
`content?`	`string`	-
`about?`	`string`	-
`radioGroup?`	`string`	-
`spellCheck?`	`Booleanish`	-
`contextMenu?`	`string`	-
`autoFocus?`	`boolean`	-
`autoCapitalize?`	`"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"`	-
`suppressHydrationWarning?`	`boolean`	-
`suppressContentEditableWarning?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`tabIndex?`	`number`	-
`nonce?`	`string`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`style?`	`CSSProperties`	-
`children?`	`ReactNode`	-
`role?`	`AriaRole`	-
`slot?`	`string`	-
`prefix?`	`string`	-
`part?`	`string`	-
`id?`	`string`	-
`className?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`title?`	`string`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`lang?`	`string`	-
`inert?`	`boolean`	-
`hidden?`	`boolean`	-
`draggable?`	`Booleanish`	-
`dir?`	`string`	-
`accessKey?`	`string`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-grabbed?`	`Booleanish`	-
`onKeyPress?`	`KeyboardEventHandler<MediaVolumeRange>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<MediaVolumeRange>`	-

Video Player

On this page