No video with supported format and mime type not found

Ionic Framework Ionic Angular
1

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

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">
  </div>

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?
Thank in advance for taking a peak :slight_smile: