Video fails on iOS after multiple page loads

Ionic Framework ionic-v3
1

I’m seeing a local video fail to load on iOS only. It only happens after loading the same page several times by navigating to and away from the page. The first 10 or so times the video loads fine, and then will fail with media error 3 (see here: https://developer.mozilla.org/en-US/docs/Web/API/MediaError). After it happens no videos will play anywhere else in the app until it is reloaded.

I’m on iOS 11.4, ionic 3. Anyone have any ideas?

HTML:

<ion-content class="ion-content--pulldown-bg">
  <div class="ion-content-wrapper">
        <video id="vid" loop preload="metadata" playsinline autoplay muted>
              <source src="assets/videos/dummy_video.mp4" type="video/mp4" />
        </video>
  </div>
</ion-content>

Typescript:

  ionViewDidLoad() {
    this.videoElement = document.getElementById("vid") as HTMLMediaElement
    this.videoElement.onerror = () => {
      alert("Error " + this.videoElement.error.code + "; details: " + this.videoElement.error.message)
    }
  }
2

I found a solution that worked here: https://stackoverflow.com/questions/28905253/media-err-decode-on-html5-video-in-ios-uiwebview-after-many-plays

The hardware decoder buffer didn’t remove the videos after the page was unloaded, you have to do it manually.

Ionic solution:

  ionViewWillUnload() {
    // Clear the videos from the decoder buffer. 
    // Buffer fills up on iOS when multiple videos are loaded.
    const elements = document.getElementsByTagName("video")
    for (let i = 0; i < elements.length; i++) {
      elements[i].src = ""
      elements[i].load()
    }
  }