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 |