3.2.0 broken on Android ExoPlayer on videos with no audio tracks

[anshul-kai]

Current behavior

After upgrading from 3.1.0 to 3.2.0 my full screen background videos stopped playing. They appear frozen. I tried the master branch, switched from exoplayer to mediaplayer and also tried the hack where you flip the paused state. None of these solutions worked. Reverting back to 3.1.0 fixes the problem.

Reproduction steps

Tested on physical Samsung Galaxy S8 with Android 7.0 using the code below.

<Video
  source={{
    uri: 'some-embedded-mp4-file',
  }}
  rate={rate}
  volume={0}
  muted
  paused={paused}
  onLoadStart={() => {}}
  onLoad={() => {}}
  onEnd={() => {}}
  repeat
  playInBackground={false}
  playWhenInactive
  resizeMode='cover'
  style={styles.bg}
/>

const styles = StyleSheet.create({
  bg: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

Platform

• Android ExoPlayer

[victorkvarghese]

Same issue here.

If we gave an http uri things work fine.

But if I provide a local path from device cache (Recorded video using react-native-camera), It will freeze on the first frame or provide a black screen sometimes

Switching backing to 3.1.0 fixed the issue (Thanks to @a-koka )

[cobarx]

Ok, I'll make sure to track this down and get it fixed before I release 4.0. Thanks for letting me know.

[robmoorman]

I can confirm this issue, also switching back to 3.1.0

[cobarx]

Tracked this down to the text track selection code not behaving properly with local resources. Will get this fixed shortly.

[iLevye]

I'm testing on emulator (SDK 22). Downgrading 3.1.0 didn't solve my issue. I followed that steps, what I'm missing?

rm -rf node_modules/react-native-video/
npm install [email protected] --save
react-native run-android

My component:

<Video
    paused={!play}
    source={{uri: story.source}}
    onEnd={ this.onEnd.bind(this) }
    style={ styles.backgroundVideo }
/>

const styles = {
    backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },

packages.json

"react": "16.3.1",
"react-native": "0.55.2",
"react-native-video": "^3.1.0",

[anshul-kai]

@iLevye Your installation looks correct but just to be sure, remove the ^ from your package.json like "react-native-video": "3.1.0" and then remove and re-install the library.

Also, did you try explayer instead of mediaplayer? Your settings.gradle needs to look like below.

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

[cobarx]

Ugh, I can't get this to act up now. Would you mind sharing a sample video and what the path looks like to make sure I have my side configured properly. Also see if there are any errors in the Android Studio logcat that you can paste here.

[janicduplessis]

@cobarx Here's the logs when playing the video

09-04 02:18:50.006  2649  2649 I ExoPlayerImpl: Init 3d38c8d [ExoPlayerLib/2.7.3] [vbox86p, Google Nexus 6 - 7.1.0 - API 25 - 1440x2560, Genymotion, 25]
09-04 02:18:50.013   545  2062 I MediaFocusControl:  AudioFocus  requestAudioFocus() from uid/pid 10105/2649 clientId=android.media.AudioManager@5c6a3a3com.brentvatne.exoplayer.ReactExoplayerView{3678e53 V.E...... ......I. 0,0-0,0} req=1 flags=0x0
09-04 02:18:50.017  2649  2649 D ReactExoplayerView: onStateChanged: playWhenReady=true, playbackState=idle
09-04 02:18:50.021  2649  2649 D ReactExoplayerView: onStateChanged: playWhenReady=true, playbackState=buffering
09-04 02:18:50.057   545   796 I MediaFocusControl:  AudioFocus  requestAudioFocus() from uid/pid 10105/2649 clientId=android.media.AudioManager@5c6a3a3com.brentvatne.exoplayer.ReactExoplayerView{3678e53 V.E...... ........ 0,0-1440,2392 #74d} req=1 flags=0x0
09-04 02:18:50.060  2649  2649 D AudioManager: AudioManager dispatching onAudioFocusChange(-1) for android.media.AudioManager@5c6a3a3com.brentvatne.exoplayer.ReactExoplayerView{fbdce3e V.E...... ........ 0,0-1440,2392 #1157}
09-04 02:18:50.060  2649  2649 W unknown:ReactNative: Calling JS function after bridge has been destroyed: RCTEventEmitter.receiveEvent([4439,"onAudioFocusChanged",{"hasAudioFocus":false}])
09-04 02:18:50.085   256   756 I MediaPlayerService: MediaPlayerService::getOMX
09-04 02:18:50.089  2649  3244 I OMXClient: MuxOMX ctor
09-04 02:18:50.092   253   382 I OMXMaster: makeComponentInstance(OMX.google.h264.decoder) in mediacodec process
09-04 02:18:50.093  2649  2649 D AudioManager: AudioManager dispatching onAudioFocusChange(-1) for android.media.AudioManager@5c6a3a3com.brentvatne.exoplayer.ReactExoplayerView{3678e53 V.E...... ......I. 0,0-0,0}
09-04 02:18:50.109  2649  3243 I MediaCodec: [OMX.google.h264.decoder] setting surface generation to 2712578
09-04 02:18:50.110   253   804 W OMXNodeInstance: [fd0024:google.h264.decoder] component does not support metadata mode; using fallback
09-04 02:18:50.110  2649  3244 E ACodec  : [OMX.google.h264.decoder] storeMetaDataInBuffers failed w/ err -1010
09-04 02:18:50.114   253   253 D SoftVideoDecoderOMXComponent: Color Aspects preference: 1
09-04 02:18:50.115   253   804 E OMXNodeInstance: setConfig(fd0024:google.h264.decoder, ConfigPriority(0x6f800002)) ERROR: UnsupportedIndex(0x8000101a)
09-04 02:18:50.115  2649  3244 I ACodec  : codec does not support config priority (err -1010)
09-04 02:18:50.119   253   253 E OMXNodeInstance: getConfig(fd0024:google.h264.decoder, ??(0x7f000003)) ERROR: UnsupportedSetting(0x80001019)
09-04 02:18:50.125   253  3245 D SoftVideoDecoderOMXComponent: Color Aspects preference: 1
09-04 02:18:50.127   253   382 E OMXNodeInstance: getConfig(fd0024:google.h264.decoder, ??(0x7f000003)) ERROR: UnsupportedSetting(0x80001019)
09-04 02:18:50.186  2649  3243 D MediaCodec: [OMX.google.h264.decoder] setting dataspace on output surface to #104
09-04 02:18:50.187   539   540 D gralloc_vbox86: gralloc_alloc: format 4 and usage 0x2130 imply creation of host color buffer
09-04 02:18:50.198  2649  3243 D         : HostConnection::get() New Host Connection established 0xb43dec40, tid 3243
09-04 02:18:50.289  2649  3243 D SoftwareRenderer: setting dataspace on output surface to #104
09-04 02:18:50.294   539   606 D gralloc_vbox86: gralloc_alloc: format 4 and usage 0x2130 imply creation of host color buffer
09-04 02:18:50.321  2649  2649 D ReactExoplayerView: onStateChanged: playWhenReady=true, playbackState=ready
09-04 02:18:50.385   539   606 D gralloc_vbox86: gralloc_alloc: format 4 and usage 0x2130 imply creation of host color buffer
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: Internal runtime error.
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: java.lang.ArrayIndexOutOfBoundsException: length=0; index=0
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at com.google.android.exoplayer2.source.TrackGroupArray.get(TrackGroupArray.java:56)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at com.google.android.exoplayer2.trackselection.MappingTrackSelector$SelectionOverride.createTrackSelection(MappingTrackSelector.java:321)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at com.google.android.exoplayer2.trackselection.MappingTrackSelector.selectTracks(MappingTrackSelector.java:571)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at com.google.android.exoplayer2.MediaPeriodHolder.selectTracks(MediaPeriodHolder.java:157)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at com.google.android.exoplayer2.ExoPlayerImplInternal.reselectTracksInternal(ExoPlayerImplInternal.java:990)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at com.google.android.exoplayer2.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:329)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at android.os.Handler.dispatchMessage(Handler.java:98)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at android.os.Looper.loop(Looper.java:154)
09-04 02:18:50.585  2649  3241 E ExoPlayerImplInternal: 	at android.os.HandlerThread.run(HandlerThread.java:61)
09-04 02:18:50.618  2649  2649 D ReactExoplayerView: onStateChanged: playWhenReady=true, playbackState=idle

Code:

        <AnimatedVideo
            useTextureView
            resizeMode="cover"
            muted
            source={require('./the-video.mp4')}
          />

Video: https://drive.google.com/file/d/1gt1649OyGrQGrMh7qjr9eQpHz4Y77bih/view?usp=sharing

Works on 3.1.0 but broken on 3.2.0 and master.

[cobarx]

Thank you for uploading that video sample, that made it way easier to fix this.

It turns out that the problem was when I was developing text & audio track support, I never tested with a video that didn't have audio tracks in it. So when a video like that got loaded, it tried to set it to the first audio track and there was none, so it crashed!

I've gone ahead and made it disable audio output when there are no tracks to play and released version 3.2.1 with the fix (as well as on master).

Thanks for reporting this and being patient. Glad we got it fixed!