はじめに

Angularで作成したWebアプリをAzure Web Appsにあげた際に、動画だけ404エラーがでて表示できない現象が起きたので、その解決方法をメモ( ..)φ

発生したエラー

GET https://hogehoge/(省略)/movie.mp4 404(Not Found)

でも動画はちゃんとassetsのなかにいる…。

解決方法

Azure Web Appsでビデオファイルを操作できるように、 web.configにMINEタイプを追加する必要があったらしいです。
逆に言うと、画像とかはデフォルトで見れるようになっている。

web.configを追加して、以下の内容をかきました。
見たいファイルはmp4だから、本当はmimeType="video/mp4"だけでいいと思われる。

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
      <mimeMap fileExtension=".ogv" mimeType="video/ogg"/>
      <mimeMap fileExtension=".webm" mimeType="video/webm"/>
    </staticContent>
  </system.webServer>
</configuration>

無事に404エラーは解消されて動画が再生できるようになりました。

おわりに

angular.jsonにweb.configのパスをかき忘れる凡ミスをして、一瞬？？？となったので気を付けよう！

参考