Skip to content
This repository has been archived by the owner on Nov 4, 2021. It is now read-only.

An Angular 6.x video player component based on DPlayer

License

Notifications You must be signed in to change notification settings

MoePlayer/angular-moeplayer

Repository files navigation

npm npm npm

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

License

This content is released under the MIT License.

About

An Angular 6.x video player component based on DPlayer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published