CURD
- st 表格
- sv 查看
- se 编辑
- cell 单元格数据
- sf 动态表单LIB
基础
- hotkey 热键
- let 定义
- media HTML5媒体
- reuse-tab 路由复用标签
- loading 加载指示符
- pdf Pdf
- qr 二维码
- lodop Lodop打印
- xlsx Excel 操作
- Observers 观察者
- onboarding 用户引导流程
- zip Zip 操作
- 图表 G2LIB
- avatar-list 用户头像列表
- count-down 倒计时
- down-file 下载文件
- 主题系统 LIB
- 工具集 LIB
表单
- range-picker 日期范围
- error-collect 表单异常消息采集器
布局
- sg 简易栅格
- ellipsis 文本自动省略号
- exception 异常
- footer-toolbar 底部工具栏
- full-content 全屏工作区
- global-footer 全局页脚
- page-header 页头
- result 处理结果
- tag-select 标签选择器
业务
- 用户认证 LIB
- notice-icon 通知菜单
- quick-menu 快速菜单
- 访问控制列表 LIB
- 缓存 LIB
- Mock模拟数据 LIB
其它
- auto-focus 自动获得焦点
- highlight 高亮

HTML5媒体
IMPORT MODULE

基于 plyr HTML5播放器。

依赖

由于 plyr 脚本大小以及对视频播放并不是刚需的原因，因此采用一种延迟加载脚本的形式，可以通过全局配置配置来改变默认 CDN 路径，默认情况下使用 https://cdn.jsdelivr.net/npm/plyr/dist/plyr.min.js、https://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基础样例

最简单的用法。

import { Component } from '@angular/core';

import { MediaComponent } from '@delon/abc/media';
import { NzButtonModule } from 'ng-zorro-antd/button';

@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>
    <div media #media [source]="mp4"></div>
  `,
  standalone: true,
  imports: [NzButtonModule, MediaComponent]
})
export class ComponentsMediaMp4Component {
  mp4 = `https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4`;
}

自定义

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

import { Component } from '@angular/core';

import type Plyr from 'plyr';

import { MediaComponent } from '@delon/abc/media';
import { NzButtonModule } from 'ng-zorro-antd/button';

@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>
    <div media #media [source]="source" [options]="options"></div>
  `,
  standalone: true,
  imports: [NzButtonModule, MediaComponent]
})
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://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4`;
    } else {
      this.source.sources[0].src = `https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3`;
    }
    this.source = { ...this.source };
  }
}

MP3基础样例

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

import { Component } from '@angular/core';

import { MediaComponent } from '@delon/abc/media';
import { NzButtonModule } from 'ng-zorro-antd/button';

@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>
    <div media #media type="audio" [source]="mp3"></div>
  `,
  standalone: true,
  imports: [NzButtonModule, MediaComponent]
})
export class ComponentsMediaMp3Component {
  mp3 = `https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3`;
}

API

mediadirectivestandalone

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

FAQ

如何更友好的使用Plyr类型

import type Plyr from 'plyr';

let 定义 reuse-tab 路由复用标签

HTML5媒体
IMPORT MODULE

依赖

代码演示

API

mediadirectivestandalone

FAQ

如何更友好的使用Plyr类型

ng-alain

相关资源

社区

HTML5媒体IMPORT MODULE

依赖

代码演示

API

mediadirectivestandalone

FAQ

如何更友好的使用Plyr类型

ng-alain

相关资源

社区

HTML5媒体
IMPORT MODULE