如何在移动浏览器中预加载 HTML5 媒体 (Audio/Video)？

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

如何在移动浏览器中预加载 HTML5 媒体 (Audio/Video)？

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

javascript

mobile

html5-video

html5-audio