HIMS ERP 1.0

Implemented video gallery for multiple videos

Added Document example Excel, PPt, Document. Code is embed with online link https://view.officeapps.live.com/op/embed.aspx?src=

A video plays from start time 4 seconds passing value from a parameter

Attached Video and source files here

Video will be played 60 FPS by passing a parameter value in the component

Forward & Backword Icon on a video player

---------------HTML--------------------

<div class="video-container">
<video #videoplayer controls>
<source src="assets/bunny1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="controls">
<button (click)="backward(10)">
<i class="fas fa-backward"></i>
</button>
<button (click)="forward(10)">
<i class="fas fa-forward"></i>
</button>
</div>
</div>

-----------------App component-----------
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('videoplayer', { static: false })
videoPlayer!: ElementRef<HTMLVideoElement>;

// Your other properties and methods...

backward(seconds: number): void {
    const video = this.videoPlayer.nativeElement;
    video.currentTime = Math.max(video.currentTime - seconds, 0);
  }

forward(seconds: number): void {
    const video = this.videoPlayer.nativeElement;
    video.currentTime = Math.min(video.currentTime + seconds, video.duration);
  }
}

----------------------CSS----------------
.demo-chart {
height: 400px;
}

video{
    width: 100%;
    display: block;
}

button{
padding: 5px 10px;
margin: 5px;
cursor: pointer;
}
/* */

.actions {
padding: 0 16px;
min-height: 100%;
display: flex;
align-items: center;
}

.office-viewer {
width: 100%;
height: 80vh; /* 80% of the viewport height */
overflow: hidden;
}

.office-viewer iframe {
height: calc(100% - 22px); /* Adjust as needed */
}

h1,
h3 {
color: green;
text-align: center;
}

.videobox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.controls {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}

button {
margin: 0 5px;
padding: 5px;
font-size: 16px;
cursor: pointer;
background-color: transparent;
border: none;
}

button i {
font-size: 24px; /* Adjust icon size as needed */
}

---------------------------CDN Font Awesome----------------------
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Added all the details in tthe previous edits