Video not loading mime type not found

so… i’m trying to get a video on my page from a data.json

the code is basically the same as the IonicConferenceApp’s page: speaker details.
Except, I switched the profile picture out for a video.

It is strange, if i source the video directly, it works fine.

here is my code, then i’ll explain more.

html

<div class="sermon-background">
<div class="topRoom" >
  <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
   <source [src]="sermon?.sermonVideo" type="video/mp4" />
  </video>
</div>
<div class="topRoom2">
  <svg width="100%" height="calc(1vw + 1vh + 6vmin)">
    <rect width="100%" height="calc(1vw + 1vh + 6vmin)" style="fill:rgba(44, 44, 44, 0.548);stroke-width:0;stroke:rgb(60,200,160)" />
    <text dominant-baseline="middle" text-anchor="middle" x="50%" y="55%" fill="white" style="font-size: calc(1vw + 1vh + 2vmin); font-family: 'Quicksand', sans-serif; font-weight: calc(.1vw + .1vh + .1vmin); text-shadow: 1px 1px 0px rgba(44, 44, 44, 0.445), 2px 2px 0px rgba(44, 44, 44,0.445), 3px 3px 0px rgba(44, 44, 44, 0.445) ">{{sermon?.name}}</text>
  </svg>
</div >
<img [src]="sermon?.profilePic" [alt]="sermon?.name">

so, the profilePic from the same place using the same method loads fine.

also, if I use “src=assets/videos/Sermon1.mp4”, that works fine.

here is my data.json

      "name": "Finding Grace",
  "profilePic": "/assets/img/stuffs/PastorEvaFace.jpg",
  "sermonVideo": "/assets/videos/Sermon1.mp4",
  "about": "Learn to fnid Grace in every circumstance and realize just how much God has given you.",
  "sum": "God has given us grace, we just need to open our eyes.",
  "location": "Everywhere",
  "id": "1"

anyone have any idea why it can’t run the video? profilePic runs fine…

I get the error “No video with supported format and mime type not found” when i try video

Thank in advance for taking a peak