如何在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=GGqbbJ

enter code here

Answer 1

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

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

通过 使用新创建的 ngx-plyr npm 包

npm i plyr ngx-plyr

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

选项#2：使用 plyr js lib

按照以下步骤将 plyr js 库集成到您的 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. 将视频标签添加到您的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 } });
     }
   
   }
   

这里是一个 stackblitz 演示，用于直接使用 plyr js lib，对上面的代码进行了一些细微的更改（由于一些 stackblitz 限制）。

Answer 2

我在Angular 16版本中安装了Plyr js播放器

第 1 步 - 使用 cmd 安装 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 步 - 在组件中声明 Plyr 包 Typescript 文件。

import { Component } from '@angular/core';

declare var Plyr: any;

@Component({
    ....
})

export class AppComponent {
player: any;   

 ngOnInit() {
    this.player = new Plyr('#video_player', {
        youtube: {
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3,
            modestbranding: 1,
            customControls: true,
            noCookie: true
        }
    });

    this.player.source = {
        type: 'video',
        sources: [
            {
                src: 'https://www.youtube.com/watch?v=slAbFqZonT0',
                provider: 'youtube'
            },
        ]
    };

    this.player.on('ended', () => {
        this.player.stop()
    });
}

第4步 - 在html组件文件中添加Html播放器内容

<div class="container">
    <video id="video_player"></video>
</div>

Answer 3

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 },

  });

}