Running multiple videos at the same time in iOS causes stalling and choppy playback

[elirichey]

Bug

While trying to play multiple videos at once in 6.0.0-alpha.3

Platform

Which player are you experiencing the problem on:

• iOS

Environment info

System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 36.15 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.10.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
    Watchman: 2022.09.26.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 18.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.70.1 => 0.70.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 6.0.0-alpha.3

Steps To Reproduce

I'm trying to play multiple videos at the same time

1. Try to run two videos at the same time in iOS Simulator and physical device

Expected behaviour

1. Playback should work fine

Reproducible sample code

  <>
        <Video
          ref={secondaryVideoPlayerRef}
          source={{uri: secondaryVideo.src}}
          paused={!isPlaying}
          muted={true}
          poster={secondaryVideo.preview}
          posterResizeMode="contain"
          resizeMode="contain"
          style={styles.secondary_video_position}
          onLoadStart={onSecondaryVideoLoadStart}
          onLoad={onSecondaryVideoLoadedAndReady}
          onBuffer={onSecondaryVideoBuffer}
          onError={onSecondaryVideoError}
          onProgress={onSecondaryVideoProgress}
          onEnd={onSecondaryVideoEnd}
          onPlaybackStalled={onSecondaryPlaybackStalled}
          onPlaybackResume={onSecondaryPlaybackResume}
          playInBackground={true}
          disableFocus={true}
        />

        <Video
          ref={defaultVideoPlayerRef}
          source={{uri: defaultVideo.src}}
          poster={defaultVideo.preview}
          paused={!isPlaying}
          muted={!false}
          posterResizeMode="contain"
          resizeMode="contain"
          style={styles.primary_video_position}
          onLoadStart={onPrimaryVideoLoadStart}
          onLoad={onPrimaryVideoLoadedAndReady}
          onBuffer={onPrimaryVideoBuffer}
          onError={onPrimaryVideoError}
          onProgress={onPrimaryVideoProgress}
          onEnd={onPrimaryVideoEnd}
          onPlaybackStalled={onPrimaryPlaybackStalled}
          onPlaybackResume={onPrimaryPlaybackResume}
          playInBackground={true}
          disableFocus={true}
        />
  </>

XCode Logs:

nw_connection_add_timestamp_locked_on_nw_queue [C39] Hit maximum timestamp count, will start dropping events
[Symptoms] {
  "transportType" : "HTTP Progressive Download",
  "mediaType" : "HTTP Progressive Download",
  "BundleID" : "mobileclient",
  "name" : "MEDIA_PLAYBACK_STALL",
  "interfaceType" : "Other"
}

The second video begins to stall, and playback gets really choppy.

[elirichey]

Seems like my issue might be similar to this older bug?

[freeboub]

additionnal questions:

• do you reproduce it on android ?
• can it be linked to the format of the video ? did you try smaller resolution of different formats ?

[emreer94]

I have the exact same problem on iOS with exact same logs, did you find a solution to this? @elirichey

[emreer94]

• Playing with lower resolution did not helped. I tried with lower resolutions but it is actually more successful opening videos with higher resolution.
• In Android, it works perfectly
• @freeboub

[sntg-p]

I'm not running multiple videos at the same time but I'm having the same problem, the MEDIA_PLAYBACK_STALL event fires and the video stops getting loaded/stalls.

I'm seeing these logs as the player while playing a video:

nw_connection_add_timestamp_locked_on_nw_queue [C721] Hit maximum timestamp count, will start dropping events nw_connection_add_timestamp_locked_on_nw_queue [C749] Hit maximum timestamp count, will start dropping events nw_connection_add_timestamp_locked_on_nw_queue [C776] Hit maximum timestamp count, will start dropping events nw_connection_add_timestamp_locked_on_nw_queue [C678] Hit maximum timestamp count, will start dropping events

Then this (same as OP) and an onBuffer event gets fired, the video freezes and does not continue:

nw_connection_add_timestamp_locked_on_nw_queue [C803] Hit maximum timestamp count, will start dropping events { "transportType" : "HTTP Progressive Download", "mediaType" : "HTTP Progressive Download", "BundleID" : "Flixxo dev", "name" : "MEDIA_PLAYBACK_STALL", "interfaceType" : "Wifi" }

When this happens, the user may invoke the seek method and play already buffered segments in which case it will fire the onBuffer event twice: first with isBuffering: false and then isBuffering: true. This double event fire happens again when it reaches the time where it originally threw the MEDIA_PLAYBACK_STALL message, which gets thrown again.

I thought it could be related to the onProgress event, but I removed it and the behavior is the same.

@elirichey Have you found any mitigation?