ngx-video-scrolling
v0.0.7
Published
An angular component allowing video scrubbing on scroll.
Downloads
23
Readme
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
}