HTML5媒体
IMPORT MODULE

基于 plyr HTML5播放器。

依赖

由于 plyr 脚本大小以及对视频播放并不是刚需的原因,因此采用一种延迟加载脚本的形式,可以通过全局配置配置来改变默认 CDN 路径,默认情况下使用 https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.jshttps://cdn.jsdelivr.net/npm/plyr/dist/plyr.css

使用本地路径

// 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'
    }
  }
};

代码演示

MP4基础样例

最简单的用法。

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`;
}
自定义

指定 sourceoptions 来自定义播放器。

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基础样例

指定 type="audio" 来播放 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

成员说明类型默认值全局配置
[type]媒体类型audio, videovideo-
[source]媒体数据源string, PlyrMediaSource--
[options]播放器参数 plyr optionsany-
[delay]延迟初始化,单位:毫秒number--
(ready)准备就绪回调EventEmitter<Plyr>--

FAQ

如何更友好的使用 Plyr 类型

import type Plyr from 'plyr';