React-native-youtube: Video pauses every seconds on Android

Created on 26 Mar 2018 · 11Comments · Source: davidohayon669/react-native-youtube

Hi.
It's working on iOS, There is no problem.
But on Android, It's not working properly.
Video is starting playing but pauses every second, So I have to press a resume button each time.
On full screen, It's working properly.

I found two following exceptions when the video got paused.

java.util.concurrent.ExecutionException: com.android.volley.ServerError
    at com.android.volley.toolbox.RequestFuture.a(:com.google.android.gms@11580470:4)
    at com.android.volley.toolbox.RequestFuture.get(:com.google.android.gms@11580470:2)
    at com.google.android.gms.herrevad.services.RemoteReportsRefreshChimeraService.a(:com.google.android.gms@11580470:25)
    at com.google.android.gms.herrevad.services.ImmediateRemoteReportsRefreshChimeraService.onHandleIntent(:com.google.android.gms@11580470:1)
    at btz.handleMessage(Unknown Source:6)
    at android.os.Handler.dispatchMessage(Handler.java:106)
    at android.os.Looper.loop(Looper.java:164)
    at android.os.HandlerThread.run(HandlerThread.java:65)
 Caused by: com.android.volley.ServerError
    at com.android.volley.toolbox.BasicNetwork.performRequest(:com.google.android.gms@11580470:37)
    at mhb.performRequest(:com.google.android.gms@11580470:4)
    at com.android.volley.NetworkDispatcher.run(:com.google.android.gms@11580470:12)

java.lang.IllegalStateException: Handler (ipn) {b23eed8} sending message to a Handler on a dead thread
    at android.os.MessageQueue.enqueueMessage(MessageQueue.java:545)
    at android.os.Handler.enqueueMessage(Handler.java:662)
    at android.os.Handler.sendMessageAtTime(Handler.java:631)
    at android.os.Handler.sendMessageDelayed(Handler.java:601)
    at android.os.Handler.sendEmptyMessageDelayed(Handler.java:565)
    at android.os.Handler.sendEmptyMessage(Handler.java:550)
    at ipn.run(SourceFile:10)
    at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:457)
    at java.util.concurrent.FutureTask.run(FutureTask.java:266)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
    at java.lang.Thread.run(Thread.java:764)

Has anyone encountered this problem?

React : 16.2.0
React Native : 0.52.0
React Native Youtube : 1.1.0

Source

umlx5h

👍12

Most helpful comment

In my case, I can't find out the overlay.

I just use work around on onChangeState when user click play button make it fullscreen.

  // for youtube control bar issue in android
  handleReady = () => {
    setTimeout(() => this.setState({ height: 281 }), 500);
  }

  changeFull = (event) => {
    console.log('event:', event);
    if (Platform.OS === 'android') {
      if (event.state === 'playing') {
        this.setState({ fullscreen: true });
      } else if (event.state === 'paused' || event.state === 'ended') {
        this.setState({ fullscreen: false });
      } else {
        console.log('nothing');
      }
    }
  }

            <YouTube
              videoId={videoId[0]}   // The YouTube video ID
              play={false}             
              fullscreen={this.state.fullscreen}
              apiKey={ApiAndId.youTuBeId}
              onError={e => {
                console.log(e);
              }}
              onReady={this.handleReady}
              onChangeState={event => this.changeFull(event)}
              style={{ alignSelf: 'stretch', height: this.state.height }}
            />

But it still has the problem that user click hardware back button when Youtube under fullscreen. Overlay will happen again.

motogod on 5 Mar 2019

👍4 🚀2 🎉2 ❤1

All 11 comments

I have a similar problem, works fine on iOS, on Android the video starts and then stops. Though I caught this error:

W/YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.facebook.react.views.view.ReactViewGroup{e41bd6d V.E...... ........ 0,1503-1440,2284 #a5e}. Top edge 36 px above YouTubePlayerView's bottom edge. .

Maybe you've got the same problem?

altescape on 4 Apr 2018

it id due to unauthorised overlay.check if anything covers video component.if it is there remove it. next is reduce video width by 2 pixel

anoopmm on 6 Apr 2018

In my case is due to React Native Navigation package and I have no idea how to solve this:

04-17 15:30:42.344 16627 16627 W YouTubeAndroidPlayerAPI: YouTube video playback stopped due to unauthorized overlay on top of player. The YouTubePlayerView is obscured by com.reactnativenavigation.views.SnackbarAndFabContainer{57317a5 V.E...... ........ 0,0-1440,2358}. YouTubePlayerView is completely covered, with the distance in px between each edge of the obscuring view and the YouTubePlayerView being: left: 42, top: 713, right: 42, bottom: 449..

sfratini on 17 Apr 2018

👍4

Facing the same problem. It pauses every second. Any solution?

smitthakkar1 on 27 Apr 2018

I replaced the video with the Standalone video for both. I just select which one using React Native's Platform.OS.

sfratini on 27 Apr 2018

@smitthakkar1 @sfratini @altescape This is a know issue with the native Android module. react-native-youtube does whatever it can to make sure its own components don't cover the native player, but cannot guarantee one of your own component's doesn't as well

check your layout for any view that might possible overlay the native player

davidohayon669 on 28 Apr 2018

In my case, I can't find out the overlay.

I just use work around on onChangeState when user click play button make it fullscreen.

  // for youtube control bar issue in android
  handleReady = () => {
    setTimeout(() => this.setState({ height: 281 }), 500);
  }

  changeFull = (event) => {
    console.log('event:', event);
    if (Platform.OS === 'android') {
      if (event.state === 'playing') {
        this.setState({ fullscreen: true });
      } else if (event.state === 'paused' || event.state === 'ended') {
        this.setState({ fullscreen: false });
      } else {
        console.log('nothing');
      }
    }
  }

            <YouTube
              videoId={videoId[0]}   // The YouTube video ID
              play={false}             
              fullscreen={this.state.fullscreen}
              apiKey={ApiAndId.youTuBeId}
              onError={e => {
                console.log(e);
              }}
              onReady={this.handleReady}
              onChangeState={event => this.changeFull(event)}
              style={{ alignSelf: 'stretch', height: this.state.height }}
            />

But it still has the problem that user click hardware back button when Youtube under fullscreen. Overlay will happen again.

motogod on 5 Mar 2019

👍4 🚀2 🎉2 ❤1

The issue exists till now. Nothing is working for me.

bbeckkk on 19 Feb 2020

👍3

Same issue happing in react-native version 0.60.

kishanbharda on 22 Feb 2020

Hi, I faced the same issue. Apparently there's a hidden view coming from the drawer navigator which overlays the YouTube player causing this issue.

I got it fixed by removing the page from the drawer navigator and placing it in a stack navigator

rprabhashvara on 18 Mar 2020

the solution from @rprabhashvara seems to be working for me. I just take out the page containing the Youtube player from drawer screen and wrap the drawer within StackNavigator.

<Stack.Navigator>

  /* This Stack is for the drawer navigation */
  <Stack.Screen
    name="AppDrawer"
    component={()=>
      <Drawer.Navigator drawerContent={DrawerContent}>
        <Drawer.Screen name="AppScreen" component={AppScreen} options=
      </Drawer.Navigator>
    }
    options={{headerShown:false}}
  ></Stack.Screen>

  /* Place the video screen at the top most stack navigation, outside the drawer */
  <Stack.Screen name="VideoScreen" component={VideoSingle} />

</Stack.Navigator>