Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No video playback on Android 10 (API 29) and Android 11 (API 30)

See original GitHub issue

Bug

Using a basic implementation of the player using react-native, I have tried with both native controls and as shown here custom controls, the video will not produce video playback, but only audio playback on an Android emulator running API 29 or 30. I have tried all different versions of both react-native and react-native-video to no avail. I have tried with and without linking and using the README’s guide to >=5.0 setup on Android. Nothing seems to be working.

Now, it does work great on iOS and any Android emulator running API 28 and 27 as that’s as far back as I’ve tested so far. I’ve tried searching for this issue, but can’t find it anywhere so that leads me to believe it’s something I’m doing otherwise I’d expect it to be a huge deal for this library. Please let me know if I’m just missing something simple here. Thanks!

Platform

Which player are you experiencing the problem on:

Android ExoPlayer
Android MediaPlayer

Environment info

React native info output:

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 494.74 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.5/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/local/opt/jenv/shims/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.65.1 => 0.65.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 5.1.1 / 5.0.1 / 4.2.0 / 3.2.0

Steps To Reproduce

react-native init VideoDemo
yarn add react-native-video react-native-media-controls react-native-slider
Write VideoPlayer.js a shown below and import it into App.js as a child component
cd ios && pod install
Open android/build.gradle in Android Studio
Build project and run on any emulator using API 29 or 30
If that doesn’t work configure android files using suggested configurations (exo-player, implementation with appcompat, etc.)
cd android && ./gradlew clean
Try to rebuild project again in Android Studio
Attempt to run on emulator again with API 29 or 30

Expected behaviour

The video to actually show the content and not just audio.
When I seek to a certain time, for the video to show from that point moving forward.

Reproducible sample code

VideoPlayer.js

import React, {useState, useRef} from 'react';
import {Dimensions, View, Platform, StatusBar} from 'react-native';
import MediaControls, {PLAYER_STATES} from 'react-native-media-controls';
import Video from 'react-native-video';

const VideoPlayer = () => {
  //  The video we will play on the player.
  const uri =
    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

  const videoPlayer = useRef(null);
  const [duration, setDuration] = useState(0);
  const [paused, setPaused] = useState(true);

  const [currentTime, setCurrentTime] = useState(0);
  const [playerState, setPlayerState] = useState(PLAYER_STATES.PAUSED);
  const [isLoading, setIsLoading] = useState(true);
  const [isFullscreen, setIsFullscreen] = useState(false);

  const onSeek = seek => {
    videoPlayer.current.seek(seek);
  };

  const onSeeking = currentVideoTime => setCurrentTime(currentVideoTime);

  const onPaused = newState => {
    setPaused(!paused);
    setPlayerState(newState);
  };

  const onReplay = () => {
    videoPlayer.current.seek(0);
    setCurrentTime(0);
    if (Platform.OS === 'android') {
      setPlayerState(PLAYER_STATES.PAUSED);
      setPaused(true);
    } else {
      setPlayerState(PLAYER_STATES.PLAYING);
      setPaused(false);
    }
  };

  const onProgress = data => {
    if (!isLoading) {
      setCurrentTime(data.currentTime);
    }
  };

  const onLoad = data => {
    setDuration(Math.round(data.duration));
    setIsLoading(false);
  };

  const onLoadStart = () => setIsLoading(true);

  const onEnd = () => {
    setPlayerState(PLAYER_STATES.ENDED);
    setCurrentTime(duration);
  };

  const videoDims = {
    height: (Dimensions.get('window').width * 9) / 16,
    width: Dimensions.get('window').width,
  };

  return (
    <View>
      <Video
        ref={ref => (videoPlayer.current = ref)}
        resizeMode={'cover'}
        source={{uri}}
        style={videoDims}
        paused={paused}
        onLoadStart={onLoadStart}
        onLoad={onLoad}
        onProgress={onProgress}
        onEnd={onEnd}
      />
      <MediaControls
        isFullScreen={false}
        duration={duration}
        isLoading={isLoading}
        progress={currentTime}
        onPaused={onPaused}
        onReplay={onReplay}
        onSeek={onSeek}
        onSeeking={onSeeking}
        mainColor={'orange'}
        playerState={playerState}
        sliderStyle={{containerStyle: {}, thumbStyle: {}, trackStyle: {}}}
      />
    </View>
  );
};

export default VideoPlayer;

logact (debug mode) outputs:

W/unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.brentvatne.react.ReactVideoViewManager
W/ReactNativeJS: 'Warning: componentWillMount has been renamed, and is not recommended for use.
W/ReactNativeJS: 'Warning: componentWillReceiveProps has been renamed, and is not recommended for use.
W/MediaPlayer: setScreenOnWhilePlaying(true) is ineffective without a SurfaceHolder

not sure if these may help

Link to the repository: https://github.com/scottkatzelnick/rn-video-demo