Question

由于HTML的异步性，我假设（可能不正确？）页面加载的时间表如下：

...等将html加载到DOM
遇到<audio>代码
预加载指定为＆＃34; auto＆＃34 ;;触发缓冲
继续将html加载到DOM ......等等。
fire window.onload事件回调
一段时间后异步：找到音频资源，开始缓冲，或者返回服务器错误; fire readystatechange事件回调

而我所希望的是preload属性值为＆＃34; auto＆＃34;将延迟window.onload事件触发或延迟标记到DOM处理，直到找到音频资源并且已经开始缓冲，或者返回服务器错误并取消加载。

我无法想象为音频资源隐瞒window.onload，但是我已经看到页面处理停止了以前的Flash资源加载或跟踪脚本加载

TLDR：window.onload关于资源加载的具体时间表是什么 - 特别是音频标签？

Answer 1

在媒体window.onload完全加载之前，似乎会调用

src事件。使用How do you check if a HTML5 audio element is loaded?中描述的方法;并包括.webkitAudioDecodedByteCount

<!DOCTYPE html>
<html>   
<head>
  <script>
    window.addEventListener("load", function() {
      var media = document.querySelector("audio");
      console.log("window onload event"
                 , media.webkitAudioDecodedByteCount
                 , media.readyState)
    })

    function myOnCanPlayFunction() {
      console.log("Can play", event.target.webkitAudioDecodedByteCount
                            , event.target.seekable.start(0)
                            , event.target.seekable.end(0));
    }

    function myOnCanPlayThroughFunction() {
      console.log("Can play through", event.target.webkitAudioDecodedByteCount
                 , event.target.seekable.start(0)
                 , event.target.seekable.end(0));
    }

    function myOnLoadedData() {
      console.log("Loaded data", event.target.webkitAudioDecodedByteCount
                 , event.target.seekable.start(0)
                 , event.target.seekable.end(0));
    }
  </script>
</head>    
<body>    
  <audio oncanplay="myOnCanPlayFunction()" 
         oncanplaythrough="myOnCanPlayThroughFunction()"             
         onloadeddata="myOnLoadedData()" 
         src="/path/to/audio/file" 
         preload autoplay buffered controls></audio>
</body>   
</html>

plnkr版本1 http://plnkr.co/edit/zIIDDLZeVU7NHdfAtFka?p=preview

使用XMLHttpRequest的{{1}}，onended事件的替代方法; AudioContext;递归请求，按顺序播放文件数组。见AudioContext.decodeAudioData()

Promise

plnkr版本2 http://plnkr.co/edit/zIIDDLZeVU7NHdfAtFka?p=preview

＆＃34; preload＆＃34; <audio>的属性会影响window.onload事件的时间吗？

1 个答案: