Angular Video Thumbnail Player

A simple solution implemented in Angular to display a thumbnail preiview image on video's progress bar hovered. The component can load thumbnail image from either frontend or backend.

Installation

Install the npm package.

  npm i ngx-thumbnail-video

Import module:

  import { NgxThumbnailVideoModule } from 'ngx-thumbnail-video';

  @NgModule({
      imports: [NgxThumbnailVideoModule]
  })

Usage 1 - Front End

Pass your video url and options into the component. e.g.

in component.ts

import { Component } from '@angular/core';
import { VideoPlayerConfig } from 'ngx-thumbnail-video';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  options: VideoPlayerConfig = {
    width: '960px',
    height: '540px'
  };
}

HTML:

<ngx-thumbnail-video url="assets/video.mp4" [options]="options"></ngx-thumbnail-video>

Usage 2 - Back End

You can choose to load the thumbnail image from a backend to improve the performance of the component. In this case, you will need to add a few configurations.

Step 1. Set the 'frontendPreload' to false in options.

  options: VideoPlayerConfig = {
    width: '960px',
    height: '540px',
    frontendPreload: false
  };

Step 2 Listen to the progressBarHover event from the component to know the currenlty hovered time(in seconds).

<ngx-thumbnail-video url="assets/video.mp4" [options]="options" (progressBarHover)="eventListener($event)" [thumb]="thumb"></ngx-thumbnail-video>

Step 3. Pass in a stringified object with sec and url properties, sec should be the same as the property emited from progressBarHover, and url can be loaded from backend server.

thumb = JSON.stringify({sec, url});

Options

| name | type | default | description | |------|------|---------|-------------| | width | string | '960px' | Video width. | | height | string | '540px' | Video height. | | autoplay | boolean| false | Autoplay video on load. | | frontendPreload | boolean| true | Generate thumbnail image at front end. | | mute | boolean | true | Mute video at beginning. | | borderRadius | string | '0' | Video border radius. | | interval | number | 1 | Interval to load a thumbnail image, must be an integer, unit is second. | | thumbnailRatio | number | 5 | Thumbnail image shrink ratio compared to video. |

Contribute to this package

Are you interested in contributing to this package? Feel free to adding a new functionality and create a merge request.

Roadmap

fullScreen - add full-screen control to the control bar just like YouTube Video did.