如何在 Angular 中使用 plyr npm 模块在 Angular2 中创建视频播放器？

Question

我正在尝试使用这个 (Plyr- https://www.npmjs.com/package/plyr ) npm 包来创建一个可以流式传输 m3u8 和 Youtube 视频的视频播放器，他们的 npm 页面有两个演示，但他们在普通的javacript。

谁能解释如何在 angular 6 应用程序中使用它？Hls怎么用等等

特别是这两个例子：https : //codepen.io/pen?template=oyLKQb#enter code here

https://codepen.io/pen?template=GGqbbJenter code here

Answer 1

您至少有两个选项。第一个（简单）选项使用现有的 angular 包，第二个选项集成了 plyr js lib 本身。

选项 #1：使用 angular npm 包 ngx-plyr

使用新创建的NGX-plyr NPM包通过

npm i plyr ngx-plyr

并遵循ngx-plyr github 使用说明或尝试这个简单的stackblitz 演示。

选项#2：使用plyr js lib

按照以下步骤将 plyr js lib 集成到您的 angular 项目中：

1. 通过yarn或npm安装plyr npm i plyr

2. 将 plyr css 添加到您的 angular.json 脚本中，并将 plyr js 添加到脚本中，例如：

   ... "styles": [ "src/styles.scss", "node_modules/plyr/dist/plyr.css" ], "scripts": [ "node_modules/plyr/dist/plyr.js" ] ...

3. 将 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>
   

4. 在您的组件中创建一个 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 限制）。