如何在移动浏览器中预加载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);
});