classall/ngx-video-scrolling

NgxVideoScrolling

An angular component allowing video scrubbing on scroll. This project is based on this CodePen.

Demo

Working demo here.

Installation

To install this library, run :

$ npm install ngx-video-scrolling

and then add it into your AppModule :

import { NgxVideoScrollingModule } from 'ngx-video-scrolling';

@NgModule({
  imports: [
    NgxVideoScrollingModule
  ],
  [ ... ]
})
export class AppModule { }

You can now use its component :

<ngx-video-scrolling [videoSource]="'../assets/test.mp4'"></ngx-video-scrolling>

Parameters

Input	Default Value	Optional	Description
videoSource	undefined	false	Video file path
frameNumber	0	true	The frame number to start the video from (in seconds)
frameDivider	1000	true	Number of pixels to scroll to scrub one second
tooltips	[]	true	Array of tooltips (See tooltips section)

Tooltips

Show customizable tooltips on video

export class Tooltip {
  public className: string;           // Custom class
  public text: string;                // Tooltip text
  public position: 'left' | 'right';  // Whether the tooltip must be on the left or right of the video
  public videoTime: number;           // Time (in seconds) of the video at which the tooltip should appears
}