Using Ngx-videogular in Angular, why is it showing 404 not found even though the path of video...

Discussão em 'Angular' iniciado por Pushkar Badve, Fevereiro 6, 2025.

  1. 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?

    videoplayer.component.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>


    videoplayer.component.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: './videoplayer.component.html',
    styleUrl: './videoplayer.component.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

    Continue reading...

Compartilhe esta Página