@creaditor/media-player-web-component NPM

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