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">
