NG-ALAIN- CURD
stTable svView seEdit sfDynamic Form LIB
- Basic
avatar-listAvatarList count-downCount down down-fileDownload file letLet mediaHTML5 Media reuse-tabReuse Route Tab loadingLoading indicator pdfPdf qrQR lodopLodop Print xlsxExcel Observers onboardingOnboarding zipZip ChartG2 LIB Theme System LIB Utils LIB
- Form
error-collectError Collect range-pickerData Range
- Layout
ellipsisEllipsis exceptionException footer-toolbarFooterToolbar full-contentFull Screen Workspace global-footerGlobal footer page-headerPage Header resultResult sgSimple Grid tag-selectTag Select
- Business
notice-iconNotification menu quick-menuQuick Menu Authentication LIB Access Control List LIB Cache LIB Mock LIB
- Other
auto-focusAuto focus highlightHighlight
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
Simplest of usage.
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`;
}Specify source andoptions to customize the player.
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 };
}
}Specify type="audio" to play 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"></media>
`,
})
export class ComponentsMediaMp3Component {
mp3 = `https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3`;
}API
media
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[type] | Media type | audio, video | video | - |
[source] | Source of the media | string, PlyrMediaSource | - | - |
[options] | Source options of the media, please refer to plyr options | any | - | ✅ |
[delay] | Delay init plyr player, unit: ms | number | - | - |
(ready) | Ready callback | EventEmitter<Plyr> | - | - |
FAQ
How to use Plyr types more friendly
import type Plyr from 'plyr';