Javascript HTML<；音频>；元素未进入Firefox中的readyState 4

我的网页上有单独的

和

元素，我希望它们能够同时开始播放，同时可以不间断地播放这两个元素（即将它们的

readyState

设置为4）。现在我使用以下代码：

// this.audio is <audio>
// this.video is <video>

var ap = new Promise((resolve, reject) => {
    this.audio.addEventListener("canplaythrough", (e) => {
        e.target.removeEventListener(e.type, arguments.callee)
        resolve()
    })
    this.audio.load()
})

var vp = new Promise((resolve, reject) => {
    this.video.addEventListener("canplaythrough", (e) => {
        e.target.removeEventListener(e.type, arguments.callee)
        resolve()
    })
    this.video.load()
})

Promise.all([ap, vp]).then(() => {
    this.audio.play()
    this.video.play()
})

//this.audio是
//这个视频是
var ap=新承诺（（解决、拒绝）=>{
this.audio.addEventListener（“canplaythrough”，（e）=>{
e、 target.removeEventListener（e.type，arguments.callee）
解决（）
})
this.audio.load（）
})
var vp=新承诺（（解决、拒绝）=>{
this.video.addEventListener（“canplaythrough”，（e）=>{
e、 target.removeEventListener（e.type，arguments.callee）
解决（）
})
this.video.load（）
})
承诺。所有（[ap，vp]）。然后（（）=>{
this.audio.play（）
这个。视频。播放（）
})

这在Chromium和Opera浏览器中非常有效，但在Firefox中几乎总是失败。原因是无论我等待多长时间，

都会陷入

readyState==3

。因此它从不触发

canplaythrough

事件（需要

readyState==4

）

尽管

元素几乎立即进入

readyState==4

。是Firefox的bug还是我做错了什么

---

我的Firefox版本是51.0a2。

我在使用不同来源的视频元素时遇到了这个问题

例如，当使用

元素时，如果

元素能够成功加载，Firefox只会将

readyState

设置为4以上的任何值。在我的例子中，轨迹只是一个带有空

src

的虚拟轨迹。因此Firefox认为视频尚未准备好，并且

readyState

卡在2上

<video autoplay controls>
      <source src="resource.mp4" type="video/mp4">
      <source src="resource.webm" type="video/webm">
      <track id="vidTrack" kind="subtitles" src="" default>
</video>

当我从视频元素中删除曲目后，Firefox立即开始播放视频。