html - Video occasionally doesn't set src attribute on iPhone - Stack Overflow

I'm building a website with a hero video section. It works fine on all devices that I've tested so far with the exception of iPhone. The problem is that, as far as I can tell, the video occasinally just doesn't set an src value from it's children source tags. Here's my code:

<video
  class="homepage-video"
  playsinline
  preload="auto"
  autoplay
  muted
  loop="loop"
>
  <script>
    const video = document.querySelector(".homepage-video")
    video.addEventListener("loadstart", () =>
      console.log("Video load started."),
    )
    video.addEventListener("error", () =>
      console.error("Video load error:", video.error),
    )
    video.addEventListener("play", () => console.log("Video is playing."))
    video.addEventListener("canplay", () => console.log("Video can play."))
    video.addEventListener("stalled", () =>
      console.warn("Video loading stalled."),
    )
    video.addEventListener("loadedmetadata", () =>
      console.log("Video metadata loaded."),
    )
    video.addEventListener("loadeddata", () =>
      console.log("First frame loaded"),
    )
    video.addEventListener("durationchange", () =>
      console.log("Duration updated"),
    )
    video.addEventListener("progress", () =>
      console.log("Video loading is progressing"),
    )
  </script>

  <source
    src=".webm"
    media="(min-width: 576px)"
    type="video/webm"
  />
  <source
    src=".mp4"
    media="(min-width: 576px)"
    type="video/mp4"
  />
  <source
    src=".webm"
    media="(max-width: 575px)"
    type="video/webm"
  />
  <source
    src=".mp4"
    media="(max-width: 575px)"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>

I've added serveral event listeners to help me debug and so far here's what I've seen.

• On some iPhones, it works nearly all the time. Maybe 95%. On others, it barely works at all, maybe 5%.
• It works perfectly, 100% on android and pc.
• The script tag was added when I was trying to debug the issue, and the event listeners stop at 'loadstart' when the video doesn't show. At this point, $0.currentSrc displays an empty string, and $0workState displays 3 - i.e NETWORK_NO_SOURCE.

Has anyone ever come across anything like this?

Tried to set a video tag in the way defined by the docs and expected it to display correctly. Instead it displayed perfectly on PC and android but not on iphone.

EDIT: I do not believe any of the answers the first commenter linked get to the answer, since the behaviour I've encountered is so inconsistent. Also, things from the comments that I've tried which do not work:

• Playsinline, loop and muted are already set and has no bearing on whether this video plays or not

• Moving the video to another place can't be the issue - if I set the src directly in the video tag, it works fine

• The problem is not related to safari but iphone. This occurs on Chrome as well.

• Setting preload to auto doesn't make any difference

• The inconsistency means that the server not supporting byte range requests is ruled out

• Videos being protected by a session based login system is ruled out because of inconsistency and because placing the src directly in the video tag makes the video works consistently

• I am not really liking the solution about serving a .mov and setting the mime type to mp4, this seems a bit hacky. I need to know what is causing this.

• Handbrake does support mp4 now, this must be an old comment

• Placing the mp4 above the webm should not make any difference. My understanding of how the browser interacts with source tags is that it starts at the top and works it's way down. If the file is not compatible or the media query doesn't match, it goes to the next source tag. With the way my source tags are structured if the browser needs an mp4 on a width less than 575, the source tags should serve it.