Skip to content

Latest commit

 

History

History
172 lines (124 loc) · 5.27 KB

README.md

File metadata and controls

172 lines (124 loc) · 5.27 KB
Raw

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

npm downloads

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!!

  1. 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

  1. 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

  2. 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

IVideoSubtitle

Property Type Description
src string Subtitle source path
name string Subtitle name. Appear on the subtitle list
default boolean? Use the video player by default