Angular 17+ bindings for [plyr video and audio player](https://github.com/sampotts/plyr). Supports everything that original library supports.
npm install @atom-platform/ngx-plyrsh
npm i plyr @atom-platform/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.
Usage
Import PlyrModule into the current module's imports:
`ts
import { PlyrModule } from '@atom-platform/ngx-plyr';
imports: [
// ...
PlyrModule,
],
`
Finally use plyr in your components as attribute:
`html
plyr
style="width: 640px;"
plyrTitle="Video 1"
[plyrPlaysInline]="true"
[plyrSources]="videoSources"
(plyrInit)="player = $event"
(plyrPlay)="played($event)"
>
or tag (remember that in this case plyr tag has display: inline which cannot accept width, so you need to care of this):
`html
plyrTitle="Video 1"
[plyrPlaysInline]="true"
[plyrSources]="videoSources"
(plyrInit)="player = $event"
(plyrPlay)="played($event)"
>
`
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
$3
- plyrType: video or audio, see source setters
- plyrTitle: string, see source setters
- plyrPoster: poster URL, see source setters
- plyrSources: array of sources, see source setters
- plyrTracks: array of tracks, see source setters
- plyrOptions: initial Plyr options
- plyrPlaysInline: whether underlying element has playsinline attribute, boolean
- plyrCrossOrigin: whether underlying element has crossorigin attribute, boolean
- plyrDriver: see [custom plyr driver
> Important: changing plyrOptions, plyrPlaysInline and plyrCrossOrigin will trigger the Plyr reinitialization, since these options cannot be changed on-the-fly
$3
ngx-plyr events:
- plyrInit: emits a plyr instance when it gets created
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 and 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.