ngx-video-scrolling
TypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

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
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.7
    1
    • latest

Version History

Package Sidebar

Install

npm i ngx-video-scrolling

Weekly Downloads

1

Version

0.0.7

License

MIT

Unpacked Size

134 kB

Total Files

30

Last publish

Collaborators

  • classall