Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smnbbrv/ngx-plyr
Angular 6+ binding for Plyr video & audio player
https://github.com/smnbbrv/ngx-plyr
Last synced: 8 days ago
JSON representation
Angular 6+ binding for Plyr video & audio player
- Host: GitHub
- URL: https://github.com/smnbbrv/ngx-plyr
- Owner: smnbbrv
- License: mit
- Archived: true
- Created: 2018-12-18T12:45:41.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-28T16:52:25.000Z (almost 2 years ago)
- Last Synced: 2024-03-15T00:33:11.031Z (8 months ago)
- Language: TypeScript
- Homepage: https://smnbbrv.github.io/ngx-plyr/
- Size: 2.48 MB
- Stars: 99
- Watchers: 4
- Forks: 64
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - ngx-plyr - Angular 6+ binding for Plyr video & audio player. (Uncategorized / Uncategorized)
README
# Deprecated: not maintained
## ngx-plyr
Angular 6+ bindings for [plyr video and audio player](https://github.com/sampotts/plyr). Supports everything that original library supports.
[](https://coveralls.io/github/smnbbrv/ngx-plyr?branch=master)
## Installation
```sh
npm i plyr ngx-plyr
```
## TypeScript typings
As long as original plyr does not have yet (sigh) typings, this project has its own at typings/plyr/index.d.ts.
If you have typings issues please refer to the issue #7 for more info.
## Demo
[Demo page](https://smnbbrv.github.io/ngx-plyr/)
## Usage
Add `"node_modules/plyr/dist/plyr.css"` to the `styles` section of your `angular.json`:
```json
"styles": [
"src/styles.scss",
"node_modules/plyr/dist/plyr.css"
],
```
Import `PlyrModule` into the current module's imports:
```ts
import { PlyrModule } from 'ngx-plyr';
imports: [
// ...
PlyrModule,
],
```
Finally use `plyr` in your components as attribute:
```html
Play
```
or tag (remember that in this case `plyr` tag has `display: inline` which cannot accept width, so you need to care of this):
```html
Play
```
and the component file would have
```ts
// get the component instance to have access to plyr instance
@ViewChild(PlyrComponent)
plyr: PlyrComponent;
// or get it from plyrInit event
player: Plyr;
videoSources: Plyr.Source[] = [
{
src: 'bTqVqk7FSmY',
provider: 'youtube',
},
];
played(event: Plyr.PlyrEvent) {
console.log('played', event);
}
play(): void {
this.player.play(); // or this.plyr.player.play()
}
```
For using with hls.js and dash.js check the examples and implementation of this project's `src/app` folder.
## API
The API mostly replicates the original Plyr API. See for more info
### Inputs
* **plyrType**: `video` or `audio`, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrTitle**: string, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrPoster**: poster URL, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrSources**: array of sources, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrTracks**: array of tracks, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrOptions**: [initial Plyr options](https://github.com/sampotts/plyr#options)
* **plyrPlaysInline**: whether underlying element has `playsinline` attribute, boolean
* **plyrCrossOrigin**: [whether underlying element has `crossorigin` attribute, boolean
* **plyrDriver**: see [custom plyr driver](#custom-plyr-driver)
> **Important**: changing `plyrOptions`, `plyrPlaysInline` and `plyrCrossOrigin` will trigger the `Plyr` reinitialization, since these options cannot be changed on-the-fly
### Events
ngx-plyr events:
* **plyrInit**: emits a plyr instance when it gets created
[plyr events:](https://github.com/sampotts/plyr#events)
* **plyrProgress**: replicates original *progress* event
* **plyrPlaying**: replicates original *playing* event
* **plyrPlay**: replicates original *play* event
* **plyrPause**: replicates original *pause* event
* **plyrTimeUpdate**: replicates original *timeupdate* event
* **plyrVolumeChange**: replicates original *volumechange* event
* **plyrSeeking**: replicates original *seeking* event
* **plyrSeeked**: replicates original *seeked* event
* **plyrRateChange**: replicates original *ratechange* event
* **plyrEnded**: replicates original *ended* event
* **plyrEnterFullScreen**: replicates original *enterfullscreen* event
* **plyrExitFullScreen**: replicates original *exitfullscreen* event
* **plyrCaptionsEnabled**: replicates original *captionsenabled* event
* **plyrCaptionsDisabled**: replicates original *captionsdisabled* event
* **plyrLanguageChange**: replicates original *languagechange* event
* **plyrControlsHidden**: replicates original *controlshidden* event
* **plyrControlsShown**: replicates original *controlsshown* event
* **plyrReady**: replicates original *ready* event
* **plyrLoadStart**: replicates original *loadstart* event
* **plyrLoadedData**: replicates original *loadeddata* event
* **plyrLoadedMetadata**: replicates original *loadedmetadata* event
* **plyrQualityChange**: replicates original *qualitychange* event
* **plyrCanPlay**: replicates original *canplay* event
* **plyrCanPlayThrough**: replicates original *canplaythrough* event
* **plyrStalled**: replicates original *stalled* event
* **plyrWaiting**: replicates original *waiting* event
* **plyrEmptied**: replicates original *emptied* event
* **plyrCueChange**: replicates original *cuechange* event
* **plyrError**: replicates original *error* event
* **plyrStateChange**: replicates original *statechange* event
## Getters and setters / Methods
You can use standard [getters and setters](https://github.com/sampotts/plyr#getters-and-setters) and [methods](https://github.com/sampotts/plyr#methods) by getting `Plyr` instance from `plyrInit`.
## Custom Plyr driver
The library allows you to go in its heart by defining a custom Plyr driver. What it means: the hardest stuff is still done for you, but you can apply some actions in the critical points like creating the Plyr instance, updating and destroying it.
This is the right place for integration with other libraries like hls.js, dash.js etc.
The default implementation looks like this:
```ts
import Plyr from 'plyr';
import { PlyrDriver, PlyrDriverCreateParams, PlyrDriverUpdateSourceParams, PlyrDriverDestroyParams } from './plyr-driver';
export class DefaultPlyrDriver implements PlyrDriver {
create(params: PlyrDriverCreateParams) {
return new Plyr(params.videoElement, params.options);
}
updateSource(params: PlyrDriverUpdateSourceParams) {
params.plyr.source = params.source;
}
destroy(params: PlyrDriverDestroyParams) {
params.plyr.destroy();
}
}
```
You can create your own driver and pass it as input parameter to the `plyr` component.
## Integrations
To integrate the library with hls.js and dash.js see the corresponding [demo source code](https://github.com/smnbbrv/ngx-plyr/tree/master/src/app). To integrate others, use same approach with a custom Plyr driver.
## Changelog
[CHANGELOG.md](CHANGELOG.md)
## License
MIT