我正在尝试使用这个 (Plyr- https://www.npmjs.com/package/plyr) npm 包来创建一个可以流式传输 m3u8 和 Youtube 视频的视频播放器,他们的 npm 页面有两者的演示,但它们是纯 javacript。
谁能解释一下如何在 Angular 6 应用程序中使用它? 如何使用hls等
尤其是这两个例子:
https://codepen.io/pen?template=oyLKQb# 在这里输入代码
最佳答案
您至少有两个选项。第一个(简单)选项使用现有的 Angular 包,第二个选项集成 plyr js 库本身。
选项 #1:使用 angular npm 包 ngx-plyr
使用新创建的ngx-plyr npm package通过
npm i plyr ngx-plyr
然后跟随ngx-plyr github usage说明或尝试这个简单的 stackblitz demo .
选项 #2:使用 plyr js 库
按照以下步骤将 plyr js 库集成到您的 Angular 项目中:
- 通过 yarn 或 npm 安装 plyr
npm i plyr
将 plyr css 添加到您的 angular.json 脚本中,并将 plyr js 添加到脚本中,例如:
... “风格”:[ “源代码/styles.scss”, “node_modules/plyr/dist/plyr.css” ], “脚本”:[ “node_modules/plyr/dist/plyr.js” ] ...
将视频标签添加到您的 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 } }); } }
这是一个stackblitz demo为了直接使用 plyr js lib,对上面的代码做了一些小改动(由于一些 stackblitz 限制)。
关于angular - 如何在 Angular 中使用 plyr npm 模块在 Angular2 中创建视频播放器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51985460/