NgxVideoTimeline

Demo

example

Installation

Compatibility

Angular	Latest ngx-video-timeline compatible
17	0.10.17
16	0.10.16
15	0.10.15
14	0.10.14
13	0.10.13
12	0.10.12
11	0.10.11
10	0.10.10
9	0.10.9

Getting Started

npm i ngx-video-timeline@0.10.17

or

yarn add ngx-video-timeline@0.10.17

NgModules Usage

Import the module into your module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
// Import NgxVideoTimelineModule if you are using a version of Angular that is below Angular V16.
import { NgxVideoTimelineComponent } from 'ngx-video-timeline';


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        // Import NgxVideoTimelineModule if you are using a version of Angular that is below Angular V16.
        NgxVideoTimelineComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

then use it in html

<ngx-video-timeline 
    class="canvas"
    [speed]="speed" 
    [playTime]="playTime" 
    [isPlayClick]="isPlayClick" 
    [videoCells]="videoCells" 
    [startTimeThreshold]="startTimeThreshold" 
    [endTimeThreshold]="endTimeThreshold" 
    [canvasHeight]="canvasHeight" 
    (playClick)="onPlayClick($event)"
>
</ngx-video-timeline>

in ts file

import { Component, OnInit } from '@angular/core';
import { VideoCellType } from 'ngx-video-timeline';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    title = 'ngx-video-timeline';

    speed: number;
    canvasHeight: number;
    startTimeThreshold: number;
    endTimeThreshold: number;
    videoCells: VideoCellType[];
    playTime: Date;
    isPlayClick: boolean;

    constructor() {
        this.speed = 10;
        this.isPlayClick = false;
        this.canvasHeight = 80;
        this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;
        this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;
        this.videoCells = [];
        this.playTime = new Date();
    }

    onPlay(): void {

        this.isPlayClick = true;
        this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;
    }

    onPause(): void {

        this.isPlayClick = false;
        // this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;
    }

    onPlayClick(date: number): void {
        // console.log(new Date(date));
        // this.canvasHeight = 60;
    }


    selectedTime(date: any): void {
        this.playTime = date.value;
    }

    changeVideo(): void {
        this.videoCells = [
            {
                beginTime: new Date().getTime() - 1 * 3600 * 1000,
                endTime: new Date().getTime() + 1 * 3600 * 1000,
                style: {
                    background: '#f3e5e4'
                }
            }
        ];
    }

    ngOnInit(): void {
    }
    onDragStart(): void {
        
    }
}

Standalone components usage

import { NgIf } from "@angular/common";
import { Component, OnInit } from "@angular/core";
import { NgxVideoTimelineComponent, VideoCellType } from "ngx-video-timeline";

@Component({
  imports: [NgIf, NgxVideoTimelineComponent],
  selector: "app-home",
  template: `
    <ngx-video-timeline
      [playTime]="playTime"
      [isPlayClick]="isPlayClick"
      [videoCells]="videoCells"
      [startTimeThreshold]="startTimeThreshold"
      [endTimeThreshold]="endTimeThreshold"
      [canvasHeight]="canvasHeight"
      [speed]="speed"
      (playClick)="onPlayClick($event)"
    ></ngx-video-timeline>
    <div>
      @if (isPlayClick) {
      <button (click)="onPause()">pause</button>
      } @else {
      <button (click)="onPlay()">play</button>
      }
      <button (click)="changeVideo()">changeVideos</button>
    </div>
  `,
  standalone: true,
})
export default class HomePage implements OnInit {
  title = "ngx-video-timeline";

  speed: number;
  canvasHeight: number;
  startTimeThreshold: number | string | Date;
  endTimeThreshold: number | string | Date;
  videoCells: VideoCellType[];
  playTime: Date;
  isPlayClick: boolean;

  constructor() {
    this.speed = 1;
    this.isPlayClick = false;
    this.canvasHeight = 80;
    this.startTimeThreshold = new Date();
    this.endTimeThreshold = new Date(new Date().getTime() + 3 * 3600 * 1000);
    this.videoCells = [];
    this.playTime = new Date();
  }

  onPlay(): void {
    this.isPlayClick = true;
    this.startTimeThreshold = new Date().getTime() - 1 * 3600 * 1000;
  }

  onPause(): void {
    this.isPlayClick = false;
    // this.endTimeThreshold = new Date().getTime() + 1 * 3600 * 1000;
  }

  onPlayClick(date: number): void {
    // console.log(new Date(date));
    // this.canvasHeight = 60;
  }

  selectedTime(date: any): void {
    this.playTime = date.value;
  }

  changeVideo(): void {
    this.videoCells = [
      {
        beginTime: new Date().getTime() - 1 * 3600 * 1000,
        endTime: new Date().getTime() + 1 * 3600 * 1000,
        style: {
          background: "#f3e5e4",
        },
      },
    ];
  }

  ngOnInit(): void {}
}

API

Name	Type	Default/Return	Description
[canvasHeight]	number	50	Canvas height (not less than 50)
[playTime]	number,string,Date	new Date().getTime() - 1 * 24 * 3600 * 1000	Playback time (default: the previous day)
[speed]	number	1	The video plays at twice the speed
[forWardValue]	number	1	Fast forward/fast backward video
[startTimeThreshold]	number,string,Date	new Date().getTime() - 1 * 12 * 3600 * 1000	Left time threshold
[endTimeThreshold]	number,string,Date	new Date().getTime() + 1 * 12 * 3600 * 1000	Right time threshold
[videoCells]	VideoCellType[]	VideoCellType[]	Video block (shown in different colors)
[borderColor]	string	"#fff"	color of canvas border
[bgColor]	string	"#fff"	color of canvas backgraound
[bottomLineColor]	string	"rgba(0,0,0,1)"	color of the bottomLine
[verticalBarColor]	string	"rgba(0,0,0,1)"	color of the verticalBar
[playBarColor]	string	"#448aff"	color of the playBar
(playClick)	any	playTime(Current timestamp)	PlayTime starts playing at speed
(mouseUp)	any	returnTime(Current timestamp)	Returns the current time when the mouse is released
(mouseDown)	any	returnTime(Current timestamp)	Returns the current time when the mouse is pressed

Interfate VideoCellType

field	name	type	required/optional	default
beginTime	The start time	number,string	required	undefined
endTime	The end of time	number,string	required	undefined
style	The background color	boolean	optional	VideoCellStyleType

Interfate VideoCellStyleType

field	name	type	required/optional	default
background	The background color	string	required	undefined

#License ngx-video-timeline is licensed under a MIT License.