问题根源:
可以看到这样一句话,意思是:桌面端的 Safari 5.0
及更高版本支持预加载属性。IOS上的 Safari
从不预加载!
这将会导致媒体标签在IOS中不会自动加载音视频,所以 oncanplay
、oncanplaythrough
事件不会自动执行
解决方案
方案一:
直接告诉浏览器我要加载该音视频,load
方法,此时 oncanplay
、oncanplaythrough
事件是可以触发的
var $audio = new Audio()
$audio.src = url
$audio.load()
$audio.addEventListener('canplay', () => {
// dosomething...
})
同一个界面多音频时,媒体标签
new Audio()
只需一个就行了,只需要点击页面中的音频后,将src赋值为对应音频的资源地址即可
方案二:
监听当前音视频时长是否发生变化,如果发生变化,就说明准备好了;用 ondurationchange
事件 代替 oncanplay
事件即可
var $audio = new Audio()
$audio.src = url
$audio.addEventListener('durationchange', () => {
// dosomething...
})
ok~测试通过,完美解决IOS上的疑难杂症!