您至少有两个选项。第一个(简单)选项使用现有的 Angular 包,第二个选项集成了 plyr js lib 本身。
选项 #1:使用角度 npm 包 ngx-plyr
通过使用新创建的 ngx-plyr npm 包
npm i plyr ngx-plyr
并遵循ngx-plyr github 使用说明或尝试这个简单的stackblitz 演示。
选项 #2:使用 plyr js 库
按照以下步骤将 plyr js 库集成到您的 Angular 项目中:
- 通过 yarn 或 npm 安装 plyr
npm i plyr
将 plyr css 添加到您的 angular.json 脚本中,并将 plyr js 添加到脚本中,例如:
...
"styles": [
"src/styles.scss",
"node_modules/plyr/dist/plyr.css"
],
"scripts": [
"node_modules/plyr/dist/plyr.js"
]
...
将 video 标签添加到您的 html 模板文件中,不要忘记链接模板和组件的 id!例如:
<div class="container">
<video id='plyrID' controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
default>
<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
</video>
在您的组件中创建 plyr 的实例,例如:
import { Component, OnInit} from '@angular/core';
import * as Plyr from 'plyr';
@Component({
selector: 'test',
templateUrl: './test.html',
})
export class TestComponent {
export class TestComponent implements OnInit {
public player;
ngOnInit() {
this.player = new Plyr('#plyrID', { captions: { active: true } });
}
}
这是一个直接使用 plyr js lib 的stackblitz 演示,对上述代码进行了一些小的更改(由于一些 stackblitz 限制)。