4

I have separate <audio> and <video> elements on my web page and I want them to start playing at the same time when both of them can be played without interruption (i.e. have their readyState set to 4). Now I am using the following code:

// 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 works perfectly in Chromium and Opera browsers, but almost always fails in Firefox. The reason for this is that <audio> gets stuck in readyState == 3 no matter how long I wait. And hence it never fires canplaythrough event (which requires readyState == 4).

Though the <video> element gets in readyState == 4 almost instantly. Is it a Firefox bug or am I doing something wrong?

My version of Firefox is 51.0a2.

ea7ababe
  • 373
  • 5
  • 13

1 Answers1

1

I encountered this issue when using a video element with different sources.

For example, when using a <track> element Firefox will only set readyState to anything above 4 if the <track> element can be successfully loaded. In my case the track was just a dummy with an empty src. Therefore Firefox deemed that the video is not ready and readyState was stuck on 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>

As soon as I removed the track from the video element, Firefox started playing the video immediately.

Tobias
  • 31
  • 5