# @creaditor/media-player-web-component > ### Keep the following in mind Latest version **0.1.2** (published 2022-09-21) · 0 weekly downloads ## Install ```sh npm install @creaditor/media-player-web-component pnpm add @creaditor/media-player-web-component yarn add @creaditor/media-player-web-component bun add @creaditor/media-player-web-component ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.2 | | Published | 2022-09-21 | | First published | 2022-03-27 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 276.9 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Maintainers | creaditor | ## Links - npm: https://www.npmjs.com/package/@creaditor/media-player-web-component - npm.io page: https://npm.io/package/@creaditor/media-player-web-component ## Dependencies (7) - [uuid](https://npm.io/package/uuid.md) ^8.3.2 - [react](https://npm.io/package/react.md) ^17.0.2 - [react-dom](https://npm.io/package/react-dom.md) ^17.0.2 - [array-move](https://npm.io/package/array-move.md) ^4.0.0 - [react-player](https://npm.io/package/react-player.md) ^2.10.0 - [react-scripts](https://npm.io/package/react-scripts.md) 5.0.0 - [react-to-webcomponent](https://npm.io/package/react-to-webcomponent.md) ^1.5.1 ## Recent versions - 0.1.2 (latest) — 2022-09-21 - 0.1.1 — 2022-03-27 - 0.1.0 — 2022-03-27 ## README # Creaditor Media Player ### Keep the following in mind this package use [react-player](https://www.npmjs.com/package/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 `` ## 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](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/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`](https://github.com/CookPete/react-player/issues/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](https://facebook.github.io/react/tips/inline-styles.html) 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](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)
  ◦  Only available when playing file URLs in [certain browsers](https://caniuse.com/#feat=picture-in-picture) | `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](#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 | --- _Source: https://npm.io/package/@creaditor/media-player-web-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._