3

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

4

1 回答 1

1

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

例如，当使用元素时，如果元素可以成功加载， <track>Firefox 只会设置readyState为高于 4 的值。<track>在我的情况下，轨道只是一个空的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 立即开始播放视频。

于 2018-08-10T18:37:41.033 回答