如何使用 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 库本身。

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

通过

使用新创建的ngx-plyr npm package

npm i plyr ngx-plyr

并遵循 ngx-plyr github usage instructions or try this simple stackblitz demo.

选项 #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" ] ...

将视频标签添加到您的 html 模板文件中，不要忘记 link 模板和组件的 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 库，对上面的代码做了一些小改动（由于一些 stackblitz 限制）。

Answer 2

npm i plyr ngx-plyr

<div id="plyrID" data-plyr-provider="youtube" data-plyr-embed-id="IQFc5u63cCk"></div>

import * as Plyr from 'plyr';

ngOnInit( ) {

  this.player = new Plyr('#plyrID', { 
    debug: true,
    volume: 0,
    autoplay: true,
    muted:false,
    loop: { active: true },

  });

}

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

How to use plyr npm module in angular to create a video player in Angular2?

typescript

angular

angular6

plyr.js