@creaditor/media-player-web-component

Creaditor Media Player

Keep the following in mind

this package use react-player

Installation

Node package

npm i styleit-api --save

Include the module in your application

import "@creaditor/media-player-web-component"

Add the tag in as dom element

<cdtr-media-player></cdtr-media-player>

Publish

Please build using npm run build

and then run npm publish

Props

Prop	Description	Default
url	The url of a video or song to play   ◦  Can be an array or MediaStream object
playing	Set to true or false to pause or play the media	false
loop	Set to true or false to loop the media	false
controls	Set to true or false to display native player controls.   ◦  For Vimeo videos, hiding controls must be enabled by the video owner.	false
light	Set to true to show just the video thumbnail, which loads the full player on click   ◦  Pass in an image URL to override the preview image	false
volume	Set the volume of the player, between 0 and 1   ◦  null uses default volume on all players #357	null
muted	Mutes the player   ◦  Only works if volume is set	false
playbackRate	Set the playback rate of the player   ◦  Only supported by YouTube, Wistia, and file paths	1
width	Set the width of the player	640px
height	Set the height of the player	360px
style	Add inline styles to the root element	{}
progressInterval	The time between onProgress callbacks, in milliseconds	1000
playsinline	Applies the playsinline attribute where supported	false
pip	Set to true or false to enable or disable picture-in-picture mode   ◦  Only available when playing file URLs in certain browsers	false
stopOnUnmount	If you are using pip you may want to use stopOnUnmount={false} to continue playing in picture-in-picture mode even after ReactPlayer unmounts	true
fallback	Element or component to use as a fallback if you are using lazy loading	null
wrapper	Element or component to use as the container element	div
playIcon	Element or component to use as the play icon in light mode
previewTabIndex	Set the tab index to be used on light mode	0
config	Override options for the various players, see config prop

Callback props

Callback props take a function that gets fired on various player events:

Prop	Description
onReady	Called when media is loaded and ready to play. If playing is set to true, media will play immediately
onStart	Called when media starts playing
onPlay	Called when media starts or resumes playing after pausing or buffering
onProgress	Callback containing played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds   ◦  eg { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }
onDuration	Callback containing duration of the media, in seconds
onPause	Called when media is paused
onBuffer	Called when media starts buffering
onBufferEnd	Called when media has finished buffering   ◦  Works for files, YouTube and Facebook
onSeek	Called when media seeks with seconds parameter
onPlaybackRateChange	Called when playback rate of the player changed   ◦  Only supported by YouTube, Wistia, and file paths
onEnded	Called when media finishes playing   ◦  Does not fire when loop is set to true
onError	Called when an error occurs whilst attempting to play media
onClickPreview	Called when user clicks the light mode preview
onEnablePIP	Called when picture-in-picture mode is enabled
onDisablePIP	Called when picture-in-picture mode is disabled