我的网页上有单独的<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。