Ngx Plyr

Angular 6+ binding for Plyr video & audio player
Alternatives To Ngx Plyr
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Lua Resty Http184
6 years ago12Lua
Lua http client driver for the ngx_lua based on the cosocket API
Ngx Plyr100223 months ago11July 22, 202239mitTypeScript
Angular 6+ binding for Plyr video & audio player
Lua Resty Fastdfs82
8 years ago5Lua
Nonblocking Lua FastDFS driver library for ngx_lua
Lua Resty Postgres59
3 years ago4Lua
Nonblocking Lua PostgreSQL driver library for ngx_lua
Lua Resty Riak26
9 years ago3Lua
Lua riak protocol buffer client driver for the ngx_lua based on the cosocket API
Lua Resty Thrift23
7 years agoLua
lua-resty-thrift -- Lua thrift client driver for the ngx_lua based on the cosocket API
Lua Resty Nsq16
3 years ago2Lua
lua-resty-nsq - Lua nsq client driver for the ngx_lua based on the cosocket API
Lua Resty Redis_cluster6
5 years agoLua
Sphinx Lua4
9 years agoLua
Lua sphinx or coreseek client driver
Lua Resty Sphinx2
5 years agoLua
Alternatives To Ngx Plyr
Select To Compare

Alternative Project Comparisons

Deprecated: not maintained


Angular 6+ bindings for plyr video and audio player. Supports everything that original library supports.

Workflow status Coverage Status @ngx-grpc/protoc-gen-ng npm version


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 page


Add "node_modules/plyr/dist/plyr.css" to the styles section of your angular.json:

"styles": [

Import PlyrModule into the current module's imports:

import { PlyrModule } from 'ngx-plyr';

imports: [
  // ...

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
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 {; // or

For using with hls.js and dash.js check the examples and implementation of this project's src/app folder.


The API mostly replicates the original Plyr API. See sampotts/plyr for more info


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


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:

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) {


You can create your own driver and pass it as input parameter to the plyr component.


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.




Popular Driver Projects
Popular Ngx Projects
Popular Libraries Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.