How can I scale video in ExoPlayer-V2 - Play Video In Full Screen

Question

I am playing video from URL on Exoplayer, it stretching the video on resizing/on using resize_mode as I have mentioned in layout file using this I am not able to maintain the aspect ratio of video.

I want to do scale type CENTER_CROP like we do in TextureSurface as mentioned in image2 but I am getting output as image1

I have tried following example

Exoplayer Demo Example

My Output (Img 1) and Expected Output (Img 2)

exoplayer layout code

  <com.google.android.exoplayer2.ui.SimpleExoPlayerView
      android:id="@+id/player_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:resize_mode="fill" />

With this line app:resize_mode="fill" it fit the video in screen but stretch vertically, So how can I solve this .

Contract

if want to play video in full screen then you must use the same orientation on app as of video, like landscape for landscape video, otherwise landscape video will get played in center of scrren in potrait mode – Leaseholder

@UmarAta is it possible to it like we do in TextureSurface scale type CENTERE_CROP ? – Contract

what exactly you want – Leaseholder

@UmarAta I have uploaded screen shot of out put please check – Contract

check this github.com/google/ExoPlayer/issues/2016 – Leaseholder

Answer 1

Following two lines helped me to play video in full-screen mode.

Using app:resize_mode in layout file this somehow help but it stretches the video as mentioned in the question picture.

<com.google.android.exoplayer2.ui.PlayerView
      android:layout_width="match_parent"
      app:resize_mode="...."
      android:layout_height="match_parent" />

Try changing AspectRatioFrameLayout to FILL,FIT,ZOOM... as per yout requirement, changing below line worked for me.

exoVideoPlayerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FILL);

Bellow line will ensure that aspect ratio is correctly maintained even for 4:3 videos.

exoPlayer.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FIT);

Also you can try changing VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING in exoplayer

Contract

The line exoVideoView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FILL); should be changed to playerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FIT);. This will ensure that aspect ratio is correctly maintained even for 4:3 videos. – Ahearn

Say, do you know how to do it for top-scale-crop, instead of center-crop? I asked about it here: https://mcmap.net/q/373024/-how-to-have-similar-mechanism-of-center-crop-on-exoplayer-39-s-playerview-but-not-on-the-center/878126 – Abigael

my player view is not in center, it placed on top (height and width is match_parent), how I can make it center ()? Note - giving top margin to playerview won't work (if I do so player view become smaller). – Chirurgeon

@BajrangHudda try giving padding – Centigrade

I was getting problems with layout_width MATCH_CONSTRAINT & layout_height WRAP_CONTENT when used with resizeMode fit, the video was getting stretched vertically. But using setResizeMode(...fixed_width) programmatically fixed this... – Projector

Answer 2

To maintain center crop in exo player below code worked for me:

Java code:

playerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_ZOOM);

or you can use from xml:

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/playerView"
    android:layout_width="match_parent"
    app:resize_mode="zoom"
    android:layout_height="match_parent" />

Slurry

After setting to zoom video does not play only image display. – Airworthy

Answer 3

Following are the Resize Mode options to play around with

app:resize_mode="fixed_width"
app:resize_mode="fixed_height"
app:resize_mode="fill"
app:resize_mode="fit"
app:resize_mode="zoom"

You can try each one to see its affect on your container.

Centigrade

I notice that fit is default, but what's the difference between fill and zoom? – Cardiff

@SamChen, fill will stretch the video destroying the ratio of the video. But, zoom will crop the video to fit to the screen maintaining the ratio. And thanks @DragonFire. It helped. Upvoted – Klipspringer

Answer 4

My issue was solved using below lines:

playerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FILL);
exoPlayer.setVideoScalingMode(C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING);

Wray

In version 2.12.1. It will be this: playerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FILL); simpleExoPlayer?.setVideoScalingMode(Renderer.VIDEO_SCALING_MODE_SCALE_TO_FIT) – Calutron

dont forget to add app:surface_type="texture_view" in PlayerView – Manager

@Manager what is the use of app:surface_type="texture_view" ? – Diarist

Is there any alternative of setVideoScalingMode as this is not present in exoplayer library i.e 2.16 – Choosey

@KPradeepKumarReddy The app:surface_type attribute in the StyledPlayerView determines the type of surface used for video rendering. There are two main options: surface_view and texture_view. – Belmonte

@KPradeepKumarReddy surface_view (default): This option uses a dedicated SurfaceView for video rendering. SurfaceView is more efficient for video playback as it renders directly to a separate surface layer without going through the view hierarchy. It allows for better performance, particularly for high-resolution videos, and provides better hardware-accelerated scaling and rendering. However, SurfaceView has some limitations when it comes to handling view transformations, such as rotations, translations, or animations, as it's not part of the standard view hierarchy. – Belmonte

@KPradeepKumarReddy texture_view: This option uses a TextureView for video rendering. TextureView is part of the standard view hierarchy and supports view transformations, such as rotations, translations, or animations, which makes it more suitable for certain use cases where these transformations are needed. However, TextureView can be less efficient compared to SurfaceView for video playback, particularly for high-resolution videos, as it involves an extra step of rendering to a texture before being displayed on the screen. – Belmonte

@KPradeepKumarReddy By setting app:surface_type="texture_view" in your StyledPlayerView, you are choosing to use a TextureView for video rendering instead of the default SurfaceView. This is useful if you need more flexibility in handling view transformations or animations, but it may come at the cost of slightly lower performance, especially for high-resolution videos. – Belmonte

Answer 5

Kotlin :

    AndroidView(
    modifier = Modifier.fillMaxSize().fillMaxHeight().fillMaxWidth(),
    factory = {
        StyledPlayerView(context).apply {
            this.resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FILL
        }
    })

Broida