VideoPlayer - Semi Design

Plus · VideoPlayer

VideoPlayer

Used to play video

Demos

How to import


import { VideoPlayer } from '@douyinfe/semi-ui';

Basic Usage

For basic usage, pass the video address through src and pass the video cover address through poster

Set controls list

Set the display items of the menu bar through controlsList. The accepted value is an array. The default value is ['play', 'next', 'time', 'volume', 'playbackRate', 'quality', 'route', 'mirror', 'fullscreen', 'pictureInPicture']

Loop playback

Use loop to set loop playback

Fast forward and rewind

Use seekTime to set the fast forward and rewind time, and use the left and right keys on the keyboard to fast forward and rewind.

Playback rate

Set the rate selection list through playbackRateList

Volume setting

Use volume to set the initial volume, the value range is 0 - 100, set muted to true to play silently

Clarity switching

Use qualityList to set the clarity selection list, defaultQuality to set the initial selected clarity, and onQualityChange to set the src logic to be updated after clicking.

Similarly for route switching, use routeList to set the clarity selection list, defaultRoute to set the initial selected route, and onRouteChange to set the src logic to be updated after clicking.

Chapter markers

Set chapter markers via markers

Theme

Set the theme via theme, the theme only affects the background color

API

Properties	Description	Type	Default Value
autoPlay	Whether to play automatically	boolean	false
captionsSrc	captions source	string	-
className	Class name	string	-
clickToPlay	Whether to enable click to play	boolean	true
controlsList	Set the menu bar to display controls. All controls are displayed by default.	string[]	['play', 'next', 'time', 'volume', 'playbackRate', 'quality', 'route', 'mirror', 'fullscreen', 'pictureInPicture']
crossOrigin	This enum attribute indicates whether CORS is used to fetch the video. CORS-enabled resources can be reused in 'canvas' elements without being polluted. Allowed values are 'anonymous' and 'use-credentials'	'anonymous' \|'use-credentials'	-
defaultPlaybackRate	Default playback rate	number	1
defaultPlaybackRate	Default video resolution	string	-
defaultRoute	Default Line	string	-
height	height	string \| number	-
loop	Whether to enable loop playback	boolean	false
markers	Chapter marking	Marker[]	-
muted	Whether to play silently	boolean	false
onPause	Pause callback	() => void	-
onPlay	Play callback	() => void	-
onQualityChange	Switch quality callback	(quality: string) => void	-
onRateChange	Switch rate callback	(rate: number) => void	-
onRouteChange	Switch route callback	(route: string) => void	-
onVolumeChange	Adjust volume callback	(volume: number) => void	-
playbackRateList	Rate list, 6 playback rates are displayed by default, namely 0.5, 0.75, 1.0, 1.25, 1.5 and 2.0	Array<{ label: string; value: string }>	-
poster	Poster	string	-
qualityList	Quality list	Array<{ label: string; value: string }>	-
routeList	Route list	Array<{ label: string; value: string }>	-
seekTime	Fast forward and rewind time	number	10
src	Video playback address	string	-
style	Style	CSSProperties	-
theme	Theme settings, different theme components have different background colors	'dark' \| 'light'	'dark'
volume	Default volume	number	100
width	width	string \| number	-

Marker

Properties	Description	Type	Default Value
start	start time point	number
title	title	string