HTML5 Media
IMPORT MODULE

HTML5 player based on plyr.

Dependencies

The plyr script file takes the form of lazy loading,you can change the default CDN path via Global Configuration. By default: https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.js, https://cdn.jsdelivr.net/npm/plyr/dist/plyr.css.

Use local path

// angular.json
{
  "glob": "**/{plyr.min.js,plyr.css,plyr.svg}",
  "input": "./node_modules/plyr/dist",
  "output": "assets/plyr/"
}
// global-config.module.ts
const alainConfig: AlainConfig = {
  media: {
    urls: ['assets/plyr/plyr.min.js', 'assets/plyr/plyr.css'],
    options: {
      iconUrl: 'assets/plyr/plyr.svg',
      blankVideo: 'https://cdn.plyr.io/static/blank.mp4'
    }
  }
};

Examples

MP4 Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-media-mp4',
  template: `
    <div class="mb-sm">
      <button nz-button (click)="media.player?.play()">Play</button>
      <button nz-button (click)="media.player?.pause()">Pause</button>
      <button nz-button (click)="media.player?.restart()">Restart</button>
    </div>
    <media #media [source]="mp4"></media>
  `,
})
export class ComponentsMediaMp4Component {
  mp4 = `https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4`;
}
Custom

Specify source andoptions to customize the player.

expand codeexpand code
import { Component } from '@angular/core';

import type Plyr from 'plyr';

@Component({
  selector: 'components-media-custom',
  template: `
    <div class="mb-sm">
      <button nz-button (click)="play('video')">Change Play Video</button>
      <button nz-button (click)="play('audio')">Change Play Audio</button>
    </div>
    <media #media [source]="source" [options]="options"></media>
  `
})
export class ComponentsMediaCustomComponent {
  source: Plyr.SourceInfo = {
    type: 'video',
    sources: [
      {
        src: ``
      }
    ],
    // 字幕
    tracks: []
  };

  options: Plyr.Options = {
    // If you any problems, open `debug` and you can quickly find the issues
    debug: true,
    // controls: ['play-large'],
    i18n: {
      // For more parameters, please refer to: https://github.com/sampotts/plyr/blob/master/src/js/config/defaults.js#L151
      play: '播放',
      pause: '暂停',
      speed: '速度',
      normal: '正常'
    }
  };

  constructor() {
    this.play('video');
  }

  play(type: 'audio' | 'video'): void {
    this.source.type = type;
    if (type === 'video') {
      this.source.sources[0].src = `https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4`;
    } else {
      this.source.sources[0].src = `http://h5player.bytedance.com/video/music/audio.mp3`;
    }
    this.source = { ...this.source };
  }
}
MP3 Basic Usage

Specify type="audio" to play MP3.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-media-mp3',
  template: `
    <div class="mb-sm">
      <button nz-button (click)="media.player?.play()">Play</button>
      <button nz-button (click)="media.player?.pause()">Pause</button>
      <button nz-button (click)="media.player?.restart()">Restart</button>
    </div>
    <media #media type="audio" [source]="mp3"></media>
  `,
})
export class ComponentsMediaMp3Component {
  mp3 = `https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3`;
}

API

media

PropertyDescriptionTypeDefaultGlobal Config
[type]Media typeaudio, videovideo-
[source]Source of the mediastring, PlyrMediaSource--
[options]Source options of the media, please refer to plyr optionsany-
[delay]Delay init plyr player, unit: msnumber--
(ready)Ready callbackEventEmitter<Plyr>--

FAQ

How to use Plyr types more friendly

import type Plyr from 'plyr';