Ngx-video-list-player NPM

NgxVideoListPlayer

This is an Angular module. It helps to integrate a video player with a video list. The video's base controls are disable and it uses custom controls for control video events.

Update

Support Youtube videos from v12.2.2

Info

No support for IE

Mobile browsers got different designe for an easier handling

In case of Youtube source, subtitles and PIP are not supported

Check out the demo!

Note: v13.0.2 is out and supports Angular 13!

Install

1) Install by running npm install ngx-video-list-player

2) Add NgxVideoListPlayerModule to your app.module.ts imports:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgxVideoListPlayerModule } from 'ngx-video-list-player';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxVideoListPlayerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Important: This module uses custom SVGs, so import of these are REQUIRED!!

3) Next step is to import these:

angular.json

"assets": [              
              {
                "glob": "**/*",
                "input": "./node_modules/ngx-video-list-player/assets",
                "output": "/assets/"
              }            
          ],

Important: folder contents of ./node_modules/ngx-video-list-player/assets always have to be in assets folder under root

4) From v12.2.2 you have to install youtube-player package as devDependency if npm didn't install automatic: npm install @angular/youtube-player --save-dev

5) From v12.2.2 you have to add Youtube API script to index.html: <script src="https://www.youtube.com/iframe_api"></script>

Basics

Usage

You can use this module easily after imports. Just use ngx-video-list-player tag in your html and give a config for it like an @Input(). For example:

app.component.html

<ngx-video-list-player [config]="config">

</ngx-video-list-player>

app.component.ts

import { IVideoConfig } from "ngx-video-list-player";

...

export class AppComponent {
    config: IVideoConfig = {
        sources: [
        {
            src: "{video1_src}",
            videoName: "{video1_name}",
            artist: "{video1_artist}"
        },
        //In case of Youtube
        {
            src: "xxxxxxxx", //e.g.: https://www.youtube.com/watch?v=xxxxxxxx
            videoName: "{video1_name}",
            artist: "{video1_artist}",
            isYoutubeVideo: true
        },
        {
            src: "{video2_src}",
            videoName: "{video2_name}",
            artist: "{video2_artist}"
        }]          
    };
...
}

Config properties

Inputs

Property	Type	Description
`config`	IVideoConfig	Config: see below the details

Outputs

Property	Parameter	Description
`onTimeUpdate`	empty	Fire at each ontimeupdate event
`onCanPlay`	empty	Fire at each onCanPlay event
`onLoadedMetadata`	empty	Fire at each onLoadedMetadata event

IVideoConfig

Property	Type	Description
`sources`	IVideoSource[]	Video sources comes here
`isVideoLoader`	boolean?	In case of slow source load you can use loader animation while waiting for first load. Default is `true`
`isAutoPlay`	boolean?	If you set more than one source, afterwhen the video is over it plays the next video automatically. Default is `false`
`isFirstVideoAutoPlay`	boolean?	The first video plays automatically when site is loaded. According to the browser's rules, the video will start in muted status in this case. Default is `false`
`videoListDisplayMode`	string?: `inline`, `block`, `none`	You can override the video list responsive display logic for a fix display setting. !!This is not dynamic property
`volumeCookieName`	string?	If you fill it, browser saves current volume as a cookie. The cookie's name depends on what you set
`videoIndexCookieName`	string?	If you fill it, browser save current video index as a cookie. The cookie's name depends on what you set. Recommended to use unique cookie name in each tag
`subtitleText`	string?	Dynamic property for subtitle container's header text. Default is `Subtitles`
`subtitleOffText`	string?	Dynamic property for subtitle's turn off text. Default is `Off`

IVideoSource

Property	Type	Description
`src`	string	Video source path
`videoName`	string?	Video name. Appear on top of the video and in the video list
`type`	string?	Video type
`artist`	string?	Video artist. Appear in the video list
`subtitles`	IVideoSubtitle[]?	Video subtitles come here
`isYoutubeVideo`	boolean?	Video source is Youtube link