twitter.com - video or audio doesn't play

[Caspy7]

URL: https://twitter.com/DavidEdwards/status/1561387930622611456

Browser / Version: Firefox 105.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Video or audio doesn't play Description: The video or audio does not play Steps to Reproduce: Video gets an infinite spinner on Nightly & Firefox. Chrome works fine.

Tested other videos on youtube and so far they all work in Firefox fine too.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[denschub]

I can reproduce that, so moving this directly into needsdiagnosis. Setting p2 for now, as most videos are fine as far as I can tell. But we should look at this anyway, just to figure out what's going on there.

[wisniewskit]

Hmm. It looks like Firefox hits this code, but Chrome doesn't:

          this._bufferingCheck = setInterval((() =>{
            if (!this._playInitiatedTime) return this._clearPlaybackWait();
            const t = this._playInitiatedTime;
            Date.now() - t > e && (this.setState({
              waitingForPlayback: !0
            }), this._clearPlaybackWait())
          }), 100)

Chrome does set the interval, but it's cleared before it ever triggers in:

                this._clearPlaybackWait = ()=>{
                    clearInterval(this._bufferingCheck),
                    this._playInitiatedTime = null
                }

The stack trace for that clearing includes functions like hlsJsPlay and onPlaying. The former is called is Firefox, but not the latter. It looks like the "canplay" listener is never fired, so it never tries to play the video:

        hlsJsPlay() {
          return new Promise((e=>{
            if (this.videoTag && (this.videoTag.readyState >= 3 || this.isEnded)) e();
             else {
              const t = () =>{
                this.videoTag && this.videoTag.readyState >= 3 && (e(), this.videoTag.removeEventListener('canplay', t))
              };
              this.videoTag.addEventListener('canplay', t)
            }
          })).then((() =>(this.checkInitialSeek(), this.videoTag.play() || Promise.resolve())))
        }

Chrome loads this manifest. Sure enough, Firefox can't seem to play the chunks of video, for instance this one:

Media resource https://video.twimg.com/ext_tw_video/1561387689714360325/pu/vid/0/3000/1280x720/m9egtoJx37B-VFnG.m4s could not be decoded. [m9egtoJx37B-VFnG.m4s](https://video.twimg.com/ext_tw_video/1561387689714360325/pu/vid/0/3000/1280x720/m9egtoJx37B-VFnG.m4s)
Media resource https://video.twimg.com/ext_tw_video/1561387689714360325/pu/vid/0/3000/1280x720/m9egtoJx37B-VFnG.m4s could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)
Details: static MP4Metadata::ResultAndByteBuffer mozilla::MP4Metadata::Metadata(mozilla::ByteStream *): Cannot parse metadata

I've filed bz1786925 to see what can be done here, so let's move the discussion there.