No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

API

NameDescriptionDefault
props
id
Used to specify where the player should be attached using a id of one DOM element.
string
'player'
source*
Sets media source URL to play. You can set the media source accordingly to existing playbacks.
stringobject
-
externalPlugins

A list of Clappr Plugins that you want to register. Check the Plugins Page for more information on plugins present in this component and how to use them. Check other external plugins in clappr docs

array
[]
options

An Object with all the options that will go directly for clappr player. Only 5 options don“t work: parent, parentId, source, events and plugins For more information check clappr docs

object
() => {}
aspectRatio

Aspect ratio of the player. It wil check the width first and calculate the height, if no width is set it will do the oposite. Ex. 16 / 9

number
-
height

Height of the player. You can use a number or a string with px or %

numberstring
-
width

Width of the player. You can use a number or a string with px or %

numberstring
'100%'
events
error
Fired when player receives an error
unknown
-
resize
unknown
-
play
Fired when player starts to play
unknown
-
pause
Fired when player pauses
unknown
-
stop
Fired when player stops
unknown
-
seek
Fired when player seeks the video
unknown
-
ended
Fired when player seeks the video
unknown
-
time-update
Fired when the time is updated on player
unknown
-
volume-update
Fired when player updates its volume
unknown
-
subtitle-available
Fired when subtitles is available
unknown
-