media HTML5媒体

基于 plyr HTML5播放器。

依赖

由于 plyr 脚本大小以及对视频播放并不是刚需的原因，因此采用一种延迟加载脚本的形式，可以通过全局配置配置来改变默认 CDN 路径（或使用本地路径），默认情况下使用 https://cdn.bootcdn.net/ajax/libs/plyr/3.5.10/plyr.min.js、https://cdn.bootcdn.net/ajax/libs/plyr/3.5.10/plyr.css。

import { MediaModule } from '@delon/abc/media';

代码演示

MP4基础样例

最简单的用法。

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" style="height: 200px"></media>
  `,
})
export class ComponentsMediaMp4Component {
  mp4 = `https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4`;
}

自定义

指定 source、options 来自定义播放器。

import { Component } from '@angular/core';
import { PlyrMediaSource, PlyrMediaType } from '@delon/abc/media';
@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" style="height: 200px;"></media>
  `,
})
export class ComponentsMediaCustomComponent {
  source: PlyrMediaSource = {
    type: 'video',
    sources: [
      {
        src: ``,
      },
    ],
    // 字幕
    tracks: [],
  };
  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: PlyrMediaType): 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基础样例

指定 type="audio" 来播放 MP3。

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" style="height: 200px"></media>
  `,
})
export class ComponentsMediaMp3Component {
  mp3 = `http://h5player.bytedance.com/video/music/audio.mp3`;
}

API

media