Skip to content
Permalink
Browse files

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

  • Loading branch information...
smnbbrv committed Dec 21, 2018
1 parent 8f6053f commit 53f8a513f5d07f4d9a940da31ab7f311d813b3a0
@@ -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)

Some generated files are not rendered by default. Learn more.

@@ -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"
@@ -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>
@@ -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,
@@ -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();
});
});
@@ -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);
}
}

}
@@ -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>
No changes.
@@ -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();
});
});
@@ -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');
}

}
@@ -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();
});
});
@@ -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);
}
}

}
@@ -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>
No changes.

0 comments on commit 53f8a51

Please sign in to comment.
You can’t perform that action at this time.