HTML5 audio and video controls (Ionic 5)

Ionic Framework
2

UPDATE: This helps reduce the occurrence of disappearing controls, but doesn’t work 100% of the time

For what it’s worth, I was able to prevent the disappearing controls, by adding a a function to the ionChange event…

<ion-segment (ionChange)="segmentChange()">

I wrapped each audio and video element in a container div with a hidden attribute and set controls and preload to false…

<!-- e.g. --> 
<div class="audio-container" hidden>
  <audio controls="false" preload="none">
    <source type="audio/mpeg" [src]="file.url" />
    [unable to load audio]
  </audio>
</div>

Then I set a short timeout to remove the hidden attribute, change the controls and preload attributes, and reload the inner HTML content, which means the player and controls get rendered on demand each time.

segmentChange() {
   if (this.media_segment == "audio" || this.media_segment == "video") {
     setTimeout(() => {
       let elems = <NodeList>(
         document.querySelectorAll("." + this.media_segment + "-container")
       );
       for (var i = 0; i < elems.length; i++) {
         let elem = <HTMLAnchorElement>elems[i];
         let inner = elem.innerHTML;
         elem.innerHTML = inner;
         elem.children[0].setAttribute("controls", "true");
         elem.children[0].setAttribute("preload", "metadata");
         elem.removeAttribute("hidden");
       }
     }, 300);
   }
 }

Still, if anyone can figure out how to force the duration and seek controls to show up, please share.