Angular-DPlayer

An Angular 6.x video player component based on DPlayer.

Install

npm install angular-dplayer --save

@Component

Example Browser App Usage

style.css

@import "~dplayer/dist/DPlayer.min.css";

app.module.ts

import { DPlayerModule } from 'angular-dplayer';
 
@NgModule({
  imports: [
    // DPlayerModule // Or
    DPlayerModule.forRoot({ // Global config
        autoplay: true      // All player can autoplay by default
    })
  ]
})

app.component.ts

import { Component } from '@angular/core';
import { DPlayerService } from 'angular-dplayer';
 
@Component({
  selector: 'app-root',
  template: `<d-player preload="auto" [video]="{url: 'http://example.com/video.mp4'}" [(volume)]="volume" (resize)="onResize()"></d-player>`
})
export class AppComponent {
  constructor(
    private DPService: DPlayerService
  ) {
  }
 
  onResize() {
    console.log('resize');
  }
}
 

Attribute Like A Native Video Element

<d-player src="http://example.com/video.webm" poster="http://example.com/poster.jpg"></d-player>

Advanced Usage

enable hls or dash suppot by directive

<d-player dpHls [video]="{url: 'http://example.com/video.m3u8'}"></d-player>

FLV Live Stream

<d-player dpFlv [live]="true" [video]="{url: 'http://example.com/video.flv'}"></d-player>

control video status

import { Component } from '@angular/core';
import { DPlayerService } from 'angular-dplayer';
 
@Component({
  selector: 'app-root',
  template: `<d-player #player [video]="{url: 'http://example.com/video.mp4'}" (resize)="onResize(player)"></d-player>`
})
export class AppComponent {
  constructor(
    private DPService: DPlayerService
  ) {
  }
 
  onResize(player) {
    player.pause();
  }
}

Options

DPlayer Options Doc

Events

DPlayer Events Doc

API

APIs

Related

• DPlayer
• vue-dplayer
• react-dplayer

License

This content is released under the MIT License.