Exoplayer in recyclerview with images and video like instagram but stop only last video other still playing after backpressed in android

Question

I tried all StackOverflow answers and youtube solutions but cannot found anything suitable that's why I post my question in it.

I want to make an app like Instagram which I show images and video but the issue is

when I swipe up in recycler view all video play automatically not only single shown screen.
when I back pressed the button then only the last video stop with audio other videos(audio) still playing in the background until kill the app.

What I want to do is.

single video play at a time which is shown on screen other video stores in cache like TikTok then after swipe I watch these videos.
after back pressed all video with audio stopped
onclicklistener with mute/unmute and double clicklistener.

here is my code...

Main Activity.class

public class MainActivity extends AppCompatActivity {
ActivityMainBinding mainBinding;
Toolbar toolbar;
String JSON_URl = "https://wasisoft.com/dev/index.php";
List feedModels = new ArrayList<>();
newsFeedAdapter imageAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mainBinding = ActivityMainBinding.inflate(getLayoutInflater());
    setContentView(mainBinding.getRoot());
    toolbar = findViewById(R.id.mews_feed_toolbar);
    toolbar.setTitle("NewsFeed");
    toolbar.setTitleTextColor(Color.WHITE);
    showList();

}

void showList() {
    AndroidNetworking.get(JSON_URl)
            .setPriority(Priority.LOW)
            .build()
            .getAsJSONArray(new JSONArrayRequestListener() {
                @Override
                public void onResponse(JSONArray response) {
                    // do anything with response
                    if (response != null) {
                        for (int i = 0; i < response.length(); i++) {
                            try {
                                JSONObject object = response.getJSONObject(i);
                                newsFeedModel FeedModel = new newsFeedModel();
                                FeedModel.setTitleName(object.getString("account_name"));
                                FeedModel.setLike(object.getString("likes"));
                                FeedModel.setDescrption(object.getString("media_type"));
                                FeedModel.setVideo(object.getString("media"));
                                FeedModel.setViewImg(object.getString("media"));
                                feedModels.add(FeedModel);
                                String res = object.getString("media");
                                Log.d("TAG", "onResponse: " + res);

                            } catch (JSONException e) {
                                e.printStackTrace();
                            }
                        }
                        imageADD(feedModels);
                    } else {
                        Toast.makeText(MainActivity.this, "None ", Toast.LENGTH_SHORT).show();
                    }
                }

                @Override
                public void onError(ANError error) {
                    // handle error
                    Toast.makeText(MainActivity.this, "No Value " + error.getErrorBody(), Toast.LENGTH_SHORT).show();
                    Log.d("TAG", "onError: " + error);
                }
            });
}

void imageADD(List feedModel) {
    imageAdapter = new newsFeedAdapter(this, feedModel, this::videoPlayBack);
    LinearLayoutManager manager = new LinearLayoutManager(this);
    manager.setSmoothScrollbarEnabled(true);
    imageAdapter.notifyDataSetChanged();
    mainBinding.newsFeedRecycler.setAdapter(imageAdapter);
    mainBinding.newsFeedRecycler.setHasFixedSize(true);
    mainBinding.newsFeedRecycler.setLayoutManager(manager);


}
void videoPlayBack(PlayerView player, Uri videoUrl,int position) {
    BandwidthMeter meter = new DefaultBandwidthMeter();
    TrackSelector track = new DefaultTrackSelector(
            new AdaptiveTrackSelection.Factory(meter)
    );
    imageAdapter.exoPlayer = ExoPlayerFactory.newSimpleInstance(this, track);
    DefaultHttpDataSourceFactory factory = new DefaultHttpDataSourceFactory("video");
    ExtractorsFactory extractorsFactory = new DefaultExtractorsFactory();
    MediaSource mediaSource = new ExtractorMediaSource(videoUrl, factory, extractorsFactory, null, null);
    player.setPlayer(imageAdapter.exoPlayer);
    player.setKeepScreenOn(true);
    imageAdapter.exoPlayer.prepare(mediaSource);
    imageAdapter.exoPlayer.setPlayWhenReady(true);
    player.setUseController(true);

}

@Override
public void onDestroy() {
    imageAdapter.releasePlayer();
    super.onDestroy();
}

@Override
protected void onPause() {
    super.onPause();
    imageAdapter.pausePlayer();
}
}

Adapter class

public class newsFeedAdapter extends RecyclerView.Adapter {
public static final int imageFeed = 0;
public static final int videoFeed = 1;
public SimpleExoPlayer exoPlayer;
Context context;
videoCallBack callBack;
List feedModels;
videoNewsFeed videoNews;
newsFeedModel model;
String Json_Url = "https://wasisoft.com/dev/";

public newsFeedAdapter(Context context, List feedModels, videoCallBack callBack) {
    this.context = context;
    this.feedModels = feedModels;
    this.callBack = callBack;
}

public newsFeedAdapter() {
}

@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    if (viewType == 0) {
        View view = LayoutInflater.from(context).inflate(R.layout.images_news_feed, parent, false);
        return new imageNewsFeed(view);
    } else {

        View view = LayoutInflater.from(context).inflate(R.layout.video_news_feed, parent, false);
        return new videoNewsFeed(view);
    }
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (holder.getItemViewType() == 0) {
        newsFeedModel feed = feedModels.get(position);
        imageNewsFeed imageNews = (imageNewsFeed) holder;

        Glide
                .with(context)
                .load(Json_Url + feed.getViewImg())
                .centerCrop()
                .into(imageNews.viewPager);
        Log.d("TAG", "onBindViewHolder: " + feed.getViewImg());

        imageNews.title.setText(feed.getTitleName());
        imageNews.likes.setText(feed.getLike());
        imageNews.description.setText(feed.getDescription());

    } else {

        model = feedModels.get(position);
        videoNews = (videoNewsFeed) holder;
        videoNews.videoLikes.setText(model.getLike());
        videoNews.videoTitle.setText(model.getTitleName());
        videoNews.videoDescription.setText(model.getDescription());
        callBack.onSuccessPlay(videoNews.videoView, Uri.parse(Json_Url + model.getVideo()), position);
    }
}

@Override
public int getItemViewType(int position) {
    if (feedModels.get(position).getDescription().contains("picture")) {
        return imageFeed;
    } else
        return videoFeed;
}

@Override
public int getItemCount() {
    return feedModels.size();
}


public void releasePlayer() {
    if (exoPlayer != null) {
        videoNews.videoView.setPlayer(null);
        exoPlayer.setPlayWhenReady(true);
        exoPlayer.getPlaybackState();
        exoPlayer.release();
        exoPlayer = null;
    }
}

public void pausePlayer() {
    if (exoPlayer != null) {
        videoNews.videoView.setPlayer(null);
        exoPlayer.setPlayWhenReady(false);
        exoPlayer.getPlaybackState();
    }
}



public static class imageNewsFeed extends RecyclerView.ViewHolder {
    ImageView dpImage, viewPager;
    TextView title, likes, description;

    public imageNewsFeed(@NonNull View itemView) {
        super(itemView);
        dpImage = itemView.findViewById(R.id.profile_image_images_news_feed);
        viewPager = itemView.findViewById(R.id.profile_image_viewPage_news_feed);
        title = itemView.findViewById(R.id.profile_image_name_news_feed);
        likes = itemView.findViewById(R.id.profile_image_like_count_news_feed);
        description = itemView.findViewById(R.id.profile_image_comments_news_feed);
    }
}

public static class videoNewsFeed extends RecyclerView.ViewHolder {
    public PlayerView videoView;
    TextView videoTitle, videoLikes, videoDescription;

    public videoNewsFeed(@NonNull View itemView) {
        super(itemView);
        videoView = itemView.findViewById(R.id.item_video_exoplayer);
        videoTitle = itemView.findViewById(R.id.profile_video_name_news_feed);
        videoLikes = itemView.findViewById(R.id.profile_video_like_count_news_feed);
        videoDescription = itemView.findViewById(R.id.profile_video_comments_news_feed);
    }
    }
    }

videoFeed.xml

user_8007341 · Answer

From code, What I understand is that, when you click on the item, a callback comes in the video playback method. Here you are assigning

 imageAdapter.exoPlayer = ExoPlayerFactory.newSimpleInstance(this, track);

So every time, you click on the item, it will assign a new instance from the factory to exoplayer and when you back press, it will release only the last assigned exoplayer.

The previous instance are still active and playing.

So either releases the previous instance before assigning a new one or reuse the same instance.

void videoPlayBack(PlayerView player, Uri videoUrl,int position) {
    BandwidthMeter meter = new DefaultBandwidthMeter();
    TrackSelector track = new DefaultTrackSelector(
            new AdaptiveTrackSelection.Factory(meter)
    );
    imageAdapter.releasePlayer();
    imageAdapter.exoPlayer = ExoPlayerFactory.newSimpleInstance(this, track);

    DefaultHttpDataSourceFactory factory = new DefaultHttpDataSourceFactory("video");
    ExtractorsFactory extractorsFactory = new DefaultExtractorsFactory();
    MediaSource mediaSource = new ExtractorMediaSource(videoUrl, factory, extractorsFactory, null, null);
    player.setPlayer(imageAdapter.exoPlayer);
    player.setKeepScreenOn(true);
    imageAdapter.exoPlayer.prepare(mediaSource);
    imageAdapter.exoPlayer.setPlayWhenReady(true);
    player.setUseController(true);

}

user_6074224 · Answer

I've made a github repo with different module and what you're looking for is in one of them called rvItemPreview the preview by a longClick on the item but you can look at the project I forked it from https://github.com/mitchtabian/Video-Player-RecyclerView

Just so you know the issue you're having now is because you're creating a new instance of Exoplayer for each item which isn't a good for CPU management and other thing. You need to create one instance of exoplayer and attach it to item that is on the screen.

You're creating a new instance for each item in onBindViewHolder with callBack.onSuccessPlay(videoNews.videoView, Uri.parse(Json_Url + model.getVideo()), position);

Exoplayer in recyclerview with images and video like instagram but stop only last video other still playing after backpressed in android

2 Answers