如何在移动浏览器中预加载 HTML5 媒体（音频/视频）？

Question

在桌面上，媒体通常会立即开始加载，因此如果您愿意，您可以等到“canplaythrough”事件被触发后再显示控件。

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

在移动设备上，至少在我的 iPhone 上，不会自动加载任何内容，因此永远不会触发canplaythrough事件并且永远不会显示我的控件。

在显示无缝用户体验的控件之前，如何确保我的媒体已预加载到内存中？

Answer 1

我的解决方案是通过将媒体转换为 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);
});