Video not showing in ionic serve

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”

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

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';

  selector: 'app-explain',
  templateUrl: './',
  styleUrls: ['./'],
export class ExplainPage implements OnInit {

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

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

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

  getData() {
    return this.http
        map((res: any) => {


Execution of code does not stop to wait for RxJS subscriptions to complete. When your component initializes, 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: