Question

我的网页上有单独的<audio>和<video>元素，我希望它们能够在不中断播放的情况下同时开始播放（即拥有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()
})

这在Chromium和Opera浏览器中运行良好，但在Firefox中几乎总是失败。这样做的原因是<audio>无论我等待多久都会卡在readyState == 3中。因此它永远不会触发canplaythrough事件（需要readyState == 4）。

虽然<video>元素几乎立即进入readyState == 4。它是Firefox的错误还是我做错了什么？

我的Firefox版本是51.0a2。

Answer 1

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

例如，使用UdpTransportTarget(('demo.snmplabs.com', 161))元素时，如果<track>元素可以成功加载，Firefox只会将readyState设置为大于4的任何值。在我的情况下，磁道只是一个带有空<track>的虚拟对象。因此，Firefox认为该视频尚未准备好， src被卡在2上。

readyState

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

HTML <audio>元素不会进入Firefox中的readyState 4

1 个答案: