Javascript 怎么判断 audio video 是否加载完

阅读(10902)

对于 <audio> 引入的音频,通过监听 canplaythrough 事件可尽快得到是否加载到可播放状态。

准确的说,canplaythrough 只是浏览器判断此音频可以播放了,不用继续等待加载,并不意味着音频加载完毕了。

完整、合理的监听方式如下:



<audio id="audioShaking" src="xxx.mp3" type="audio/mpeg" autostart="0"></audio>

<script type="text/javascript">
var audioElement = document.getElemetsByTagName('audio')[0];

if (audioElement.readyState == 4) {  // android会走此逻辑
    // @todo
} else {    // iOS走此逻辑
    audioElement.addEventListener("canplaythrough", function() {
        // @todo
    }, false);
    audioElement.load();    // 需要主动触发下,不然不会加载
}
</script>

参考:
http://www.w3school.com.cn/tags/av_event_canplaythrough.asp
https://developer.mozilla.org/en-US/docs/Web/Events/canplaythrough
https://msdn.microsoft.com/en-us/library/windows/apps/hh441235.aspx

Tags: