How to use ExoPlayer in a ListvVew or RecyclerView?

[NatsumeReiko]

I want to use ExoPlayer in a RecyclerView as a part of row item. I want to make a customer view and wrap the ExoPlayer in that view.

Do you have some advice?

Thank you!

[sahujaunpuri]

ExoPlayer in RecyclerView, First we have to write a custom component for ExoPlayer. Get a sample app and source code here (Complete Solution ) https://androidwave.com/exoplayer-in-recyclerview-in-android/

Yes this code working perfectly. I have need get data from firebase. Anyone please guide me

Did you get any solution? I am also stuck with Firestore Database. I wanted to load videos from Firestore Database.

I'm not store video etc on firebase. I want just get url etc firebase database.

[yudikarma]

ExoPlayer in RecyclerView, First we have to write a custom component for ExoPlayer. Get a sample app and source code here (Complete Solution ) https://androidwave.com/exoplayer-in-recyclerview-in-android/

Yes this code working perfectly. I have need get data from firebase. Anyone please guide me

Did you get any solution? I am also stuck with Firestore Database. I wanted to load videos from Firestore Database.

I'm not store video etc on firebase. I want just get url etc firebase database.

anyone have answer how to implement exoplayer in recyclerview with data from network and adapter use PagedListAdapter ??????

[adam-hurwitz]

I haven't experimented with this strategy yet, but the way I would approach this is managing the ExoPlayer instance in a Foreground Service that passes the ExoPlayer view back to the Fragment/Activity that is initializing ExoPlayer. Then, update the corresponding RecyclerView cell based on the user interaction.

The service will manage the ExoPlayer lifecycle, while you will need to manage refreshing the UI for the appropriate cell when media is start/stopped/changed.

[yudikarma]

ExoPlayer in RecyclerView, First we have to write a custom component for ExoPlayer. Get a sample app and source code here (Complete Solution ) https://androidwave.com/exoplayer-in-recyclerview-in-android/

thank you @droidwave . Your code works very well in my application. but. there is a slight problem. so. I use your exoplayerrecyclerview to play videos on recyclerview, the problem is when I call the notifyitemchange (position) function to update an item on videoViewHolder. the video paused, but the audio still runs in the background. How to make it not stop and keep video play running when the notifyitemchange (position) function is called ??

[droidwave]

when you notifyitemchange some item, I will be refresh, so you have to manage the state of the player. Give me a few days time I'm simplifying this solution.

[yudikarma]

big thanks @droidwave iam waiting for your update... iam realy have no idea for fix it.

[yudikarma]

when you notifyitemchange some item, I will be refresh, so you have to manage the state of the player. Give me a few days time I'm simplifying this solution.

hi @droidwave any update and solution ?? iam diffcult for fix it. your help is much appreciated!

[amit016verma]

Thanks @droidwave I am following your blog , but I am getting the white screen while I am playing the video but sound work properly because I am doing notifyDataSetChanged so this is the reason I am not able to see the video please help me in this , thanks in advance

[MostafaAnter]

here is new concept to implement that so check this out Integrate RecyclerView with ExoPlayer — The clean way — and customization, article that demonstrates my solution is Meduim article My Youtube Demo and you can find demo repo here

[eneim]

Hi all, remember my proposal above? I have completed my implementation and here is an(other) article about how to use ExoPlayer in RecyclerView in simple way:

https://ene.im/2020/06/28/kohii-201-videos-in-recyclerview

• [x] Automatic playback.
• [x] Reuse a few PlayerView instances for all of your Videos.
• [x] Reuse ExoPlayer instances.

(Backup: https://www.notion.so/Videos-in-RecyclerView-6a4b2f5b71384a0bae9390b01522136f)

[guilhermesgb]

@eneim I just ran into your library right now - damn, it works like a charm! It truly "makes playback easy". Thank so much for your work!

[nirazv]

Can someone please help me to use ExoPlayer with ViewPager2 using RecyclerViewAdAPTER?

[paulocoutinhox]

Hi guys,

I really want only thing pls:

solve the problem that happen when i animated anything over the player view (surface view). It is flicking/lagging when i call any animation or change some object visibility. I don't know if layout things can be impacting it.

I solve all other problems, only left this one to be perfect.

And i understand that no one here have any obligation.

Project page: https://github.com/paulo-coutinho/rvplayer

[nihk]

Here's a simple app showing how I've been doing it with ViewPager2: https://github.com/nihk/exo-viewpager-fun

[Allan-Nava]

Here's a simple app showing how I've been doing it with ViewPager2: https://github.com/nihk/exo-viewpager-fun

The performance are good?

[nirazv]

It loads videos from LocalStorage not from Internet so performance will be good in offline mode but for online i can't tell because it need to pre cache first portion of data

[user849651]

Looking for some help. I've followed some of the suggestions here, specifically from @mpainenz, to come up with a solution. However, when the videos start playing, it briefly flashes a black screen and I'm not sure how to fix it. Would really appreciate any help.

Here is the relevant code from my RecyclerView's adapter class:

public class PostAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context context;
    private SimpleExoPlayer exoPlayer;
    private HlsMediaSource.Factory hlsMediaSourceFactory;

    public PostAdapter(Context context) {
        this.context = context;
        this.exoPlayer = new SimpleExoPlayer.Builder(context)
                .build();
        this.exoPlayer.setVideoTextureView(new TextureView(context));
        this.hlsMediaSourceFactory = new HlsMediaSource.Factory(CustomMediaSourceFactory.buildMediaSourceFactory())
                .setAllowChunklessPreparation(true); // TODO: Look into this
    }

    public class PostViewHolder extends RecyclerView.ViewHolder {
        public ConstraintLayout videoContainer;
        public ImageView videoThumbnail;
        public HlsMediaSource hlsMediaSource;
        public FrameLayout playerViewContainer;
        public PlayerView playerView;

        public PostViewHolder(View v) {
            super(v);

            videoContainer = v.findViewById(R.id.video_container);
            videoThumbnail = v.findViewById(R.id.video_thumbnail);
            playerViewContainer = v.findViewById(R.id.player_view_container);
        }

        public void prepareVideo() {
            if (exoPlayer == null) {
                return;
            }

            if (exoPlayer.getCurrentMediaItem() != hlsMediaSource.getMediaItem()) {
                exoPlayer.addListener(new Player.EventListener() {
                    @Override
                    public void onPlaybackStateChanged(int state) {
                        if (state == Player.STATE_READY) {
                            playerView.setVisibility(View.VISIBLE);
                        }
                    }
                });

                exoPlayer.setVolume(0);
                exoPlayer.setRepeatMode(Player.REPEAT_MODE_ALL);
                playerView.setPlayer(exoPlayer);

                // Set the media item to be played.
                exoPlayer.setMediaSource(hlsMediaSource);

                // Prepare the player
                exoPlayer.prepare();
            }

            // Play
            playVideo();
        }

        public void playVideo() {
            if (exoPlayer != null) {
                exoPlayer.play();
            }
        }

        // This is called when the RecyclerView item comes into view
        public void attachPlayer() {
            // Prepare the video
            prepareVideo();

            // Check if the player view already exists
            int index = playerViewContainer.indexOfChild(playerView);
            if (index == -1) {
                // Add the player view
                playerViewContainer.addView(playerView);
            }
        }

        // This is called when the RecyclerView item goes out of view
        public void detachPlayer() {
            playerView.setPlayer(null);
            playerViewContainer.removeView(playerView);
        }
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        final Post post = (Post) data.get(position);
        Video video = post.getVideo();

        if (video != null) {
            Glide.with(context)
                    .load(video.getThumbnailUrl())
                    .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                    .into(holder.videoThumbnail);

            if (video.getUrls() != null && video.getUrls().getHls() != null) {
                holder.hlsMediaSource = hlsMediaSourceFactory.createMediaSource(MediaItem.fromUri(video.getUrls().getHls()));
            }
        }

        holder.playerView = new PlayerView(context);
        holder.playerView.setUseController(false);

        // Keep last video frame when player resets
        holder.playerView.setKeepContentOnPlayerReset(true);

        holder.videoContainer.setVisibility(View.VISIBLE);
    }
}

I don't think I'm doing anything out of the ordinary, so I'm wondering why the video flashes a black screen before it actually begins playing.

As you can see, I create a new PlayerView on bind. When the item comes into view it attaches the player, and when it goes out of view, it detaches the player.

What am I doing wrong?

[andrewlewis]

@user849651 Is this the same as #9248? If so let's keep the discussion there to avoid duplicated effort.

[mecoFarid]

here is new concept to implement that so check this out Integrate RecyclerView with ExoPlayer — The clean way — and customization, article that demonstrates my solution is Meduim article My Youtube Demo and you can find demo repo here

Why do you even call this "clean". I mean you are creating ExoPlayer instance multiple times. And what does "clean" really mean here?

[mecoFarid]

Here's a simple app showing how I've been doing it with ViewPager2: https://github.com/nihk/exo-viewpager-fun

Just to point out the pitfall here. https://github.com/nihk/videopager/blob/caf0f3c049d713cff8bba3e11798b3f99d62e606/exo/src/main/kotlin/com/exo/players/ExoAppPlayer.kt#L101. Why do you treat prepare() as a synchronous method. It is async method

[nihk]

Here's a simple app showing how I've been doing it with ViewPager2: https://github.com/nihk/exo-viewpager-fun

Just to point out the pitfall here. https://github.com/nihk/videopager/blob/caf0f3c049d713cff8bba3e11798b3f99d62e606/exo/src/main/kotlin/com/exo/players/ExoAppPlayer.kt#L101. Why do you treat prepare() as a synchronous method. It is async method

I'm not sure what you're asking. There's no treatment nor dependency on Player.prepare() being executed synchronously in that file.

[varun7952]

I have created a singleton exoplayer class where i am attaching and detaching playerview based on recyclerview positions. I will share my code soon.

[nirazv]

I have created a singleton exoplayer class where i am attaching and detaching playerview based on recyclerview positions. I will share my code soon.

now no one using recyclerview try jetpack compose.

[paulocoutinhox]

I have created a singleton exoplayer class where i am attaching and detaching playerview based on recyclerview positions. I will share my code soon.

Please, share.

[varun7952]

I have created a singleton exoplayer class where i am attaching and detaching playerview based on recyclerview positions. I will share my code soon.

now no one using recyclerview try jetpack compose.

99% of code of new exoplayer (media3) written in java even we are using Core java in our production app without using compose in most of the cases