How can I pre-load HTML5 Media (Audio/Video) in a mobile browser?

On a desktop, media generally begins loading immediately, so you can wait until the "canplaythrough" event is fired before showing the controls, if you want to.

var button = document.getElementById('play_button');
button.innerHTML = 'Loading...';
var audio = new Audio('mySound.mp4');
audio.addEventListener('canplaythrough', ()=>{
  button.innerHTML = 'Click to Play';
  button.addEventListener('click', audio.play());
});

On mobile, at least on my iPhone, nothing is automatically loaded, therefore the canplaythrough event is never fired and my controls are never shown.

How can I ensure my media is pre-loaded into memory before showing controls for a seamless UX?

1 answer

  • answered 2020-10-29 17:58 I wrestled a bear once.

    My solution was to load the media into memory with by converting it to a DataURL.

    var button = document.getElementById('play_button');
    button.innerHTML = 'Loading...';
    fetch(src).then(r=>r.blob()).then(blob=>{
      var reader =  new FileReader();
      reader.addEventListener("load", ()=>{
        var audio = new Audio('mySound.mp4');
        button.innerHTML = 'Click to Play';
        button.addEventListener('click', audio.play());
      });
      reader.readAsDataURL(blob);
    });