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

【问题标题】：How can I pre-load HTML5 Media (Audio/Video) in a mobile browser?如何在移动浏览器中预加载 HTML5 媒体（音频/视频）？
【发布时间】：2020-10-29 17:58:50
【问题描述】：

在桌面上，媒体通常会立即开始加载，因此您可以等到触发 "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 事件，并且永远不会显示我的控件。

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

【问题讨论】：

标签： javascript mobile html5-video html5-audio

【解决方案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);
});

【讨论】：