如何解决如何在移动浏览器中预加载HTML5媒体音频/视频?
在台式机上,媒体通常会立即开始加载,因此,如果需要,您可以等到触发"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控件之前,如何确保我的媒体已预加载到内存中?
解决方法
我的解决方案是通过将媒体转换为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);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。