Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/atom-platform/ngx-plyr

Angular 17+ binding for Plyr video & audio player
https://github.com/atom-platform/ngx-plyr

Last synced: 9 days ago
JSON representation

Angular 17+ binding for Plyr video & audio player

Awesome Lists containing this project

README 

        
# Atom-Platform ngx-plyr for Angular



## Forked from smnbbrv/ngx-plyr, but this version supports angular 17+



## @atom-platform/ngx-plyr



Angular 17+ bindings for [plyr video and audio player](https://github.com/sampotts/plyr). Supports everything that original library supports.



[![Push](https://github.com/atom-platform/ngx-plyr/actions/workflows/publish.yml/badge.svg?branch=main&event=push)](https://github.com/atom-platform/ngx-plyr/actions/workflows/publish.yml)



## Installation



```sh

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




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/atom-platform/ngx-plyr/tree/master/src/app). To integrate others, use same approach with a custom Plyr driver.



## License



MIT