Video not showing in ionic serve

hello
in my html i put a code how show me a especific video they i have in my library but when i start the serve the video doesn’t see and the console say this “GET http://localhost:8100/assets/videos/ 404 not found”

  <p>{{video}}</p>
  <video controls>
    <source src="../../assets/videos/{{video}}.mp4" type="video/mp4">
  </video>
</ion-content>

where {{video}} is replace for a mp4 video’s name

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-explain',
  templateUrl: './explain.page.html',
  styleUrls: ['./explain.page.scss'],
})
export class ExplainPage implements OnInit {

  constructor(
    private activatedRoute: ActivatedRoute,
    private http: HttpClient,
    private router: Router
  ) { }

  id: any;
  text: any = [];
  video: string | undefined;

  ngOnInit() {
    this.id = this.activatedRoute.snapshot.paramMap.get("id");
    console.log("id", this.id);
    this.getData().subscribe(res => {
      console.log("Res", res);
      this.text = res;
      this.video = this.text[this.id].video;
    });
  }

  getData() {
    return this.http
      .get("assets/ayudas/video.json")
      .pipe(
        map((res: any) => {
          return res.video;
        })
      )
  }

}

Execution of code does not stop to wait for RxJS subscriptions to complete. When your component initializes, this.video is undefined – so it is trying to load ../../assets/videos/.mp4. You should delay showing the <video> element by waiting for the video property to have a value (*ngIf="video").

thank you so much :medal_sports: :medal_sports: :medal_sports: :medal_sports: :medal_sports: :medal_sports: :medal_sports: :medal_sports: :medal_sports: