Home

Awesome

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. Supports everything that original library supports.

Push

Installation

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:

import { PlyrModule } from '@atom-platform/ngx-plyr';

imports: [
  // ...
  PlyrModule,
],

Finally use plyr in your components as attribute:

<div
  plyr
  style="width: 640px;"
  plyrTitle="Video 1"
  [plyrPlaysInline]="true"
  [plyrSources]="videoSources"
  (plyrInit)="player = $event"
  (plyrPlay)="played($event)"
></div>

<button (click)="play()">Play</button>

or tag (remember that in this case plyr tag has display: inline which cannot accept width, so you need to care of this):

<plyr
  style="display: block; width: 640px;"
  plyrTitle="Video 1"
  [plyrPlaysInline]="true"
  [plyrSources]="videoSources"
  (plyrInit)="player = $event"
  (plyrPlay)="played($event)"
></plyr>

<button (click)="play()">Play</button>

and the component file would have

// 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 https://github.com/sampotts/plyr for more info

Inputs

Important: changing plyrOptions, plyrPlaysInline and plyrCrossOrigin will trigger the Plyr reinitialization, since these options cannot be changed on-the-fly

Events

ngx-plyr events:

plyr events:

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:

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. To integrate others, use same approach with a custom Plyr driver.

License

MIT