Angular 19 video from assets folder

Question

I am creating an Angular 19 app. This is my stackblitz link.

This is my video tag in index.html

<video controls width="600" height="300" id="myVideo">
  <source src="/assets/DIA.mp4" type="video/mp4" />
</video>

The video is not loading. I have assets in my angular.json

"assets": [
          {
            "glob": "**/*",
            "input": "public"
          }
        ],

and the MP4 file is not found in media folder either, when I tested it in my local with Visual Studio 2022. I have tried to reference it from src folder and it is not working either. Is it possible to show video in angular project?

Thanks in advance

Answer 1

This configuration tells Angular to copy all files from the public folder, not from src/assets. If your video file DIA.mp4 is in src/assets (or any other folder not specified here), Angular won’t include it in the final build. This is why your tag cannot find the file.

Modify angular.json to include the src/assets folder. For example:

"assets": [
  "src/assets",
  "src/favicon.ico"
]

then, the path in your template will look something like this:

<video controls width="600" height="300" id="myVideo">
  <source src="assets/DIA.mp4" type="video/mp4" />
</video>