Videogular2 video is broken on publish

Question

I have a angular 4 project and added a video using Videogular2 like so:

<vg-player>
  <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
    <source src=".\assets\videos\Video1.mp4" type="video/mp4">
  </video>
</vg-player>

And it works locally. But when I publish it the video display as broken video. In their documentation I see that they typed the full path of the video, but when I try to do that I get the same result. If i navigate to the full path of the video I get:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

What am I missing?

Answer 1

Found the problem.

Because I'm using Azure, I needed to create my own web.config file. In it I had to tell IIS to allow mp4 mime types, just added this mimeMap row to staticContent:

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
    </staticContent>
</system.webServer>