Fullscreen the Exoplayer

Question

I try to show the show video (.mp4) with exoplayer in RecyclerView and ViewPager. I show the video controller with custom layo

Answer 1

You can apply magic-using ExoPlayerView

playerView.setControllerVisibilityListener(new 
PlaybackControlView.VisibilityListener() {
   @Override
   public void onVisibilityChange(int i) {
      // Using Activity
      if (getActionBar() != null)
          if (i == 0) { 
            // code for show
          } else{
            // code for hide
        }
   }
});

Answer 2

You can use this library if you want a FullScreen Exoplayer :

https://github.com/Norulab/android-exoplayer-fullscreen

This library contain some extensions functions for ExoPlayer :

val player = SimpleExoPlayer.Builder(context).build()
player.preparePlayer(playerView)
player.setSource(applicationContext, "http://html5videoformatconverter.com/data/images/happyfit2.mp4")

Answer 3

Be sure to set the length and width of the player view to match with its parent.

1. Use this to hide the status bar: getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

2. Use this to hide the navigation bar: getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);

Answer 4

The ExoPlayer library currently does not provide a built-in way to enable/disable fullscreen mode. You need to implement this yourself or find some third party code for this I'm afraid.

Essentially two steps are required:

a) Set the window and activity properties to fullscreen and/or immersive mode and (if desired) change to landscape mode. That's not difficult. See this page on Android Developers.

b) Transition rendering to a SimpleExoPlayerView (actually it's about the Surface) which covers the entire viewport in immersive mode. This is more of a challenge to achieve optimal user experience on all API levels.

For an optimal user experience, we want to keep the player playing while doing the transition to full screen and back, to continue playback seamlessly. In a RecyclerView this is kind of tricky to solve for all API levels.

Approach 1

The easiest way is probably having a separate instance of SimpleExoPlayerView which you put on top of your layout as soon as you entered immersive mode (some people open a dialog with the second view for this, some have the second view simply on top in the layout somehow and show/hide it on demand).

Then you detach the player instance from the SimpleExoPlayerView embedded in the RV and attach it to the fullscreen view with a call to a static helper method:

SimpleExoPlayerView.switchTargetView(simpleExoPlayer, oldPlayerView, newPlayerView);

This approach works very well on API >=23. With API 23 the method MediaCodec.setOutputSurface allowing to swap surfaces dynamically has been added. The static method above makes sure this technique is applied. As a result audio and video keep playing and the user experience from entering and exiting fullscreen is super smooth. For API <=22 a new codec instance needs to be create to swap to another surface. This interrupts playback and the user experience for this approach is degraded.

Approach 2

To avoid swapping to another surface on lower API level, you need to use a single surface and transition it to fullscreen somehow. You can either just hide everything else than the SimpleExoPlayerView and set the layout width and height to match it's parent or, you can replace the video view with a placeholder and put it on top and back.

This can work quite well for simple layouts but with complex layouts probably including fragments, viewpagers, recyclerviews this can be a quite intrusive operation causing something to flicker or interrupting playback shortly (on some API levels for instance when removing the player view from the view hierarchy). I've seen this working nicely for various layouts though.

Further approaches/challenges

There might be other and probably better approaches when you dig deeper and/or if you are not using SimpleExoPlayerView at all.

Answer 5

You can easily do this from the XML of the ExoPlayer. Set the following attribute:

app:resize_mode="fill"

Answer 6

To show the complete full screen video on expo player use this line in you xml file app:resize_mode="fill"