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

Question

I am trying to use this (Plyr-https://www.npmjs.com/package/plyr) npm package to create a video player that could stream m3u8 and Youtube videos, their npm page has demos for both but they're in plain javacript.

Can anyone explain how to use it in an angular 6 app? How to use Hls and so on

Especially these two examples: https://codepen.io/pen?template=oyLKQb#enter code here

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

Answer 1

You have at least two Options. The first (simple) option makes use of an existing angular package, the second integrates the plyr js lib itself.

Option #1: Use angular npm package ngx-plyr

Use the newly created ngx-plyr npm package via

npm i plyr ngx-plyr

and follow the ngx-plyr github usage instructions or try this simple stackblitz demo.

Option #2: use plyr js lib

Integrate the plyr js lib into your angular project following these steps:

1. Install plyr via yarn or npm npm i plyr

2. Add into your angular.json scripts the plyr css and into scripts the plyr js e.g.:

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

3. Add the video tag to your html template file, don't forget an id to link the template and the component! E.g:

   <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. Create an instance of the plyr in your component e.g:

   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 } });
     }
   
   }
   

Here is a stackblitz demo for direct usage of plyr js lib, with some minor changes to the above code (due to some stackblitz constraints).

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

  });

}