Video fails on iOS after multiple page loads - ios

Question

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)
}

Answer 1

I found a solution that worked here: 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()
}
}