feat: add hls.js and dash.js example integrations

README.md

@@ -75,6 +75,8 @@ play(): void {
 }
 ```
 
+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
@@ -88,6 +90,8 @@ The API mostly replicates the original Plyr API. See https://github.com/sampotts
 * **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)
 
+* **plyrDriver**: see [custom plyr driver](#Custom Plyr driver)
+
 > **Important**: changing `plyrOptions` will trigger the `Plyr` reinitialization, since these options cannot be changed on-the-fly (limitation of Plyr itself)
 
 ### Events
@@ -135,6 +139,37 @@ ngx-plyr events:
 
 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 provider and pass it as input parameter to the `plyr` component.
+
 ## Changelog
 
 [CHANGELOG.md](CHANGELOG.md)

package.json

@@ -25,7 +25,10 @@
     "@angular/platform-browser": "~7.0.0",
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
+    "@types/hls.js": "^0.10.2",
     "core-js": "^2.5.4",
+    "dashjs": "^2.9.2",
+    "hls.js": "^0.12.0",
     "plyr": "^3.4.7",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26"

src/app/app.component.html

@@ -3,3 +3,11 @@ <h1>{{ title }}</h1>
 <div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrInit)="player = $event" (plyrPlay)="played($event)"></div>
 
 <button (click)="play()">Play</button>
+
+<hr>
+
+<app-hlsjs></app-hlsjs>
+
+<hr>
+
+<app-dashjs></app-dashjs>

src/app/app.module.ts

@@ -2,11 +2,14 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { PlyrModule } from '../../projects/ngx-plyr/src/public_api';
 import { AppComponent } from './app.component';
-
+import { DashjsComponent } from './dashjs/dashjs.component';
+import { HlsjsComponent } from './hlsjs/hlsjs.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    DashjsComponent,
+    HlsjsComponent
   ],
   imports: [
     BrowserModule,

src/app/dashjs-plyr-driver/dashjs-plyr-driver.spec.ts

@@ -0,0 +1,11 @@
+import { TestBed } from '@angular/core/testing';
+import { DashjsPlyrDriver } from './dashjs-plyr-driver';
+
+describe('DashjsPlyrDriver', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DashjsPlyrDriver = TestBed.get(DashjsPlyrDriver);
+    expect(service).toBeTruthy();
+  });
+});

src/app/dashjs-plyr-driver/dashjs-plyr-driver.ts

@@ -0,0 +1,45 @@
+import 'dashjs/dist/dash.all.min.js';
+import Plyr from 'plyr';
+import { PlyrDriver, PlyrDriverCreateParams, PlyrDriverDestroyParams, PlyrDriverUpdateSourceParams } from '../../../projects/ngx-plyr/src/public_api';
+
+declare const dashjs: any;
+
+export class DashjsPlyrDriver implements PlyrDriver {
+
+  dash = dashjs.MediaPlayer().create();
+
+  private videoElement: HTMLVideoElement;
+
+  private loaded = false;
+
+  constructor(private autoload: boolean) {
+    this.dash.getDebug().setLogToBrowserConsole(false);
+  }
+
+  create(params: PlyrDriverCreateParams) {
+    this.videoElement = params.videoElement;
+
+    return new Plyr(params.videoElement, params.options);
+  }
+
+  updateSource(params: PlyrDriverUpdateSourceParams) {
+    if (this.autoload) {
+      this.load(params.source.sources[0].src);
+    } else {
+      // poster does not work with autoload
+      params.videoElement.poster = params.source.poster;
+    }
+  }
+
+  destroy(params: PlyrDriverDestroyParams) {
+    params.plyr.destroy();
+  }
+
+  load(src: string) {
+    if (!this.loaded) {
+      this.loaded = true;
+      this.dash.initialize(this.videoElement, src, false);
+    }
+  }
+
+}

src/app/dashjs/dashjs.component.html

@@ -0,0 +1,9 @@
+<h2>dash.js</h2>
+
+<h3>Autoload</h3>
+
+<div style="width: 600px;" plyr [plyrDriver]="dashjsDriver1" [plyrOptions]="options" [plyrSources]="sources" [plyrPoster]="poster" (plyrInit)="plyr1 = $event"></div>
+
+<h3>Load on play</h3>
+
+<div style="width: 600px;" plyr [plyrDriver]="dashjsDriver2" [plyrOptions]="options" [plyrSources]="sources" [plyrPoster]="poster" (plyrInit)="plyr2 = $event" (plyrPlay)="played($event)"></div>

src/app/dashjs/dashjs.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashjsComponent } from './dashjs.component';
+
+describe('DashjsComponent', () => {
+  let component: DashjsComponent;
+  let fixture: ComponentFixture<DashjsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashjsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashjsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashjs/dashjs.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import Plyr from 'plyr';
+import { DashjsPlyrDriver } from '../dashjs-plyr-driver/dashjs-plyr-driver';
+
+@Component({
+  selector: 'app-dashjs',
+  templateUrl: './dashjs.component.html',
+  styleUrls: ['./dashjs.component.scss']
+})
+export class DashjsComponent implements OnInit {
+
+  options: Plyr.Options = {
+    captions: { active: true, update: true, language: 'en' },
+  };
+
+  poster = 'https://bitdash-a.akamaihd.net/content/sintel/poster.png';
+
+  sources: Plyr.Source[] = [{
+    type: 'video',
+    src: 'https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd',
+  }];
+
+  dashjsDriver1 = new DashjsPlyrDriver(true);
+
+  dashjsDriver2 = new DashjsPlyrDriver(false);
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  played() {
+    this.dashjsDriver2.load('https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd');
+  }
+
+}

src/app/hlsjs-plyr-driver/hlsjs-plyr-driver.spec.ts

@@ -0,0 +1,11 @@
+import { TestBed } from '@angular/core/testing';
+import { HlsjsPlyrDriver } from './hlsjs-plyr-driver';
+
+describe('HlsjsPlyrDriver', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: HlsjsPlyrDriver = TestBed.get(HlsjsPlyrDriver);
+    expect(service).toBeTruthy();
+  });
+});

src/app/hlsjs-plyr-driver/hlsjs-plyr-driver.ts

@@ -0,0 +1,40 @@
+import * as Hls from 'hls.js';
+import Plyr from 'plyr';
+import { PlyrDriver, PlyrDriverCreateParams, PlyrDriverDestroyParams, PlyrDriverUpdateSourceParams } from '../../../projects/ngx-plyr/src/public_api';
+
+export class HlsjsPlyrDriver implements PlyrDriver {
+
+  hls = new Hls();
+
+  private loaded = false;
+
+  constructor(private autoload: boolean) {}
+
+  create(params: PlyrDriverCreateParams) {
+    this.hls.attachMedia(params.videoElement);
+
+    return new Plyr(params.videoElement, params.options);
+  }
+
+  updateSource(params: PlyrDriverUpdateSourceParams) {
+    if (this.autoload) {
+      this.load(params.source.sources[0].src);
+    } else {
+      // poster does not work with autoload
+      params.videoElement.poster = params.source.poster;
+    }
+  }
+
+  destroy(params: PlyrDriverDestroyParams) {
+    params.plyr.destroy();
+    this.hls.detachMedia();
+  }
+
+  load(src: string) {
+    if (!this.loaded) {
+      this.loaded = true;
+      this.hls.loadSource(src);
+    }
+  }
+
+}

src/app/hlsjs/hlsjs.component.html

@@ -0,0 +1,9 @@
+<h2>hls.js</h2>
+
+<h3>Autoload</h3>
+
+<div style="width: 600px;" plyr [plyrDriver]="hlsjsDriver1" [plyrOptions]="options" [plyrSources]="sources" [plyrPoster]="poster" (plyrInit)="plyr1 = $event" (plyrLanguageChange)="languageChanged(hlsjsDriver1, plyr1)"></div>
+
+<h3>Load on play</h3>
+
+<div style="width: 600px;" plyr [plyrDriver]="hlsjsDriver2" [plyrOptions]="options" [plyrSources]="sources" [plyrPoster]="poster" (plyrInit)="plyr2 = $event" (plyrPlay)="played($event)" (plyrLanguageChange)="languageChanged(hlsjsDriver2, plyr2)"></div>