I am creating a demo app where I want to display a video in video player but I don't know why it is showing "GET http://localhost:4200/assets/video/human.mp4 404 (Not Found)" even path is correct?
videoplayerponent.html
<vg-player (onPlayerReady)="onPlayerReady($event)">
<vg-overlay-play></vg-overlay-play>
<vg-buffering vgFor="singleVideo"></vg-buffering>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-playback-button></vg-playback-button>
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-scrub-bar style="pointer-events: none"></vg-scrub-bar>
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-track-selector></vg-track-selector>
<vg-mute></vg-mute>
<vg-volume></vg-volume>
</vg-controls>
<video
[vgMedia]="$any(media)"
#media
id="singleVideo"
preload="auto"
src="../assets/video/human.mp4"
crossorigin
></video>
</vg-player>
videoplayerponent.ts
import { Component } from '@angular/core';
import { VgApiService, VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
@Component({
selector: 'app-videoplayer',
imports: [
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,
],
templateUrl: './videoplayerponent.html',
styleUrl: './videoplayerponent.scss',
})
export class VideoplayerComponent {
preload: string = 'auto';
constructor(private api: VgApiService) {}
// api: VgApiService = new VgApiService();
onPlayerReady(event: VgApiService) {
this.api = event;
console.log('onPlayerReady - ', event);
this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(() => {
console.log('Metadata Loaded');
this.autoplay();
});
}
autoplay() {
console.log('Video Played');
this.api.getDefaultMedia().currentTime = 0;
this.api.play();
}
}
ERROR
I have checked the versions of angular and ngx-videogular. Versions