ngg-video-player v0.0.1

video player

ng-videoplayer is a custom video player component written in Angular. It provides a fully customizable video player interface with various features such as volume control, full-screen toggle, video quality selection, and more.

Installation

To install the ng-videoplayer library, use the following command:

npm install ng-videoplayer

Usage

To use the video player component in your Angular application, follow these steps:

1. Install and Import the Component First, import the NgVideoPlayerComponent into your Angular module or component.

import { Component } from '@angular/core';
import { VideoPlayerOptions } from 'ng-videoplayer';
import { NgVideoPlayerComponent } from 'ng-videoplayer';

@Component({
  selector: 'app-root',
  imports: [NgVideoPlayerComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Define the video player options
  videoPlayerOptions: VideoPlayerOptions = {
    title: 'Sample Video Title',  // Title of the video
    poster: 'https://example.com/video-poster.jpg',  // Poster image before the video starts
    posterError: 'https://example.com/error-poster.jpg',  // Error poster if the video fails to load
    src: 'https://example.com/video.mp4',  // Main video source
    duration: 120,  // Duration of the video in seconds
    qualities: [
      {
        quality: '1080p',
        src: 'https://example.com/video-1080p.mp4'  // 1080p quality video source
      },
      {
        quality: '720p',
        src: 'https://example.com/video-720p.mp4'  // 720p quality video source
      }
    ],
    actions: {
      download: {  // Download action
        status: true,  // Enable download option
        icon: '/assets/icons/download.svg'  // Icon for download
      },
      fullScreen: {  // Full-screen toggle action
        status: true,  // Enable full-screen option
        icon: '/assets/icons/full-screen.svg'  // Icon for full-screen
      },
      subtitle: {  // Subtitle action
        status: true,  // Enable subtitle option
        icon: '/assets/icons/subtitle.svg'  // Icon for subtitles
      },
      embed: {  // Embed action
        status: true,  // Enable embed option
        icon: '/assets/icons/embed.svg'  // Icon for embed
      }
    },
    template: {  // Customize the player appearance
      themeColor: '#2D336B',  // Primary theme color
      controlBackgroundColor: '#A9B5DF7F',  // Background color for controls
      hoverBackgroundColor: '#A9B5DF',  // Hover effect background color
      textColor: '#000000',  // Text color in the player
      icons: {
        play: '/assets/icons/play.svg',  // Play button icon
        pause: '/assets/icons/pause.svg',  // Pause button icon
        volume: {  // Volume control icons
          high: '/assets/icons/volume-high.svg',
          middle: '/assets/icons/volume-middle.svg',
          low: '/assets/icons/volume-low.svg',
          mute: '/assets/icons/volume-mute.svg'
        }
      }
    }
  };
}

2. Add the Video Player to Your Template

<!-- app.component.html -->
<ng-video-player [options]="videoPlayerOptions"></ng-video-player>

3. Customize the Player:

• Title: Set the title of the video.
• Poster: Provide an image URL to display before the video starts playing.
• Video Source (src): Define the main video URL.
• Duration: Specify the duration of the video in seconds.
• Qualities: Define different video quality sources (e.g., 1080p, 720p).
• Actions: Enable or disable actions such as download, fullscreen, subtitle, and embed. You can also customize the icons for each action.
• Template: Customize the appearance of the player, including theme color, background colors, text color, and icons. #^ two spaces

4. Controlling the Video Programmatically

// Toggle play/pause
this.videoPlayerComponent.togglePlay();

// Toggle fullscreen mode
this.videoPlayerComponent.toggleFullscreen();

// Update the progress of the video (e.g., seek to a specific time)
this.videoPlayerComponent.updateProgress(timeInSeconds);

// Update the video’s buffered percentage
this.videoPlayerComponent.updateBuffered(percentage);

Example

import { Component } from '@angular/core';
import { VideoPlayerOptions } from 'ng-videoplayer';
import { NgVideoPlayerComponent } from 'ng-videoplayer';

@Component({
  selector: 'app-root',
  imports: [NgVideoPlayerComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  videoPlayerOptions: VideoPlayerOptions = {
    title: 'Amazing Video',
    poster: 'https://example.com/video-poster.jpg',
    src: 'https://example.com/video.mp4',
    duration: 200,
    qualities: [
      { quality: '1080p', src: 'https://example.com/video-1080p.mp4' },
      { quality: '720p', src: 'https://example.com/video-720p.mp4' }
    ],
    actions: {
      download: { status: true, icon: '/assets/icons/download.svg' },
      fullScreen: { status: true, icon: '/assets/icons/full-screen.svg' },
      subtitle: { status: true, icon: '/assets/icons/subtitle.svg' },
      embed: { status: true, icon: '/assets/icons/embed.svg' }
    },
    template: {
      themeColor: '#2D336B',
      controlBackgroundColor: '#A9B5DF7F',
      hoverBackgroundColor: '#A9B5DF',
      textColor: '#FFFFFF',
      icons: {
        play: '/assets/icons/play.svg',
        pause: '/assets/icons/pause.svg',
      },
    },
  };
}

<!-- app.component.html -->
<ng-video-player [options]="videoPlayerOptions"></ng-video-player>

License

MIT License

Copyright (c) 2025 aliservat

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.