ViewPager2 play video only in selected item

Question

I have a ViewPager2 with padding and page transformer. Inside the viewpager I host fragments with TextureView to play videos. The problem is that every visible TextureView starts to play its video. I have tried to override the fragment's onPause() and OnStart() method to call mediaPlayer.start() and mediaPlayer.stop() from there. This way only the selected fragment's video will be played. However, when I move backwards in the viewpager the already started video won't start again. Sometimes it doesn't even get loaded and only an empty TextureView is visible.

Here is the fragment's code:

 public TextureView mTextureView;
 public MediaPlayer mMediaPlayer;
 @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_video_player,container,false);
        VideoSingleton videos = VideoSingleton.get(getContext());
        mVideo = videos.getVideoWithTitle(getArguments().getString(KEY_VIDEO));
        mTextureView = view.findViewById(R.id.video_texture_view);
        mMediaPlayer= new MediaPlayer();
        try {
            mMediaPlayer.setDataSource(getContext(),mVideo.getVideoUri());
        } catch (IOException e) {
            e.printStackTrace();
        }
        mTextureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() {
            @Override
            public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int i, int i1) {
                Surface s = new Surface(surfaceTexture);
                try {
                    mMediaPlayer.setSurface(s);
                    mMediaPlayer.prepare();

                } catch (IllegalArgumentException | SecurityException | IllegalStateException | IOException e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void onSurfaceTextureSizeChanged(SurfaceTexture surfaceTexture, int i, int i1) {

            }

            @Override
            public boolean onSurfaceTextureDestroyed(SurfaceTexture surfaceTexture) {
                return false;
            }

            @Override
            public void onSurfaceTextureUpdated(SurfaceTexture surfaceTexture) {

            }
        });

        return view;
    }

    @Override
    public void onPause() {
        super.onPause();
        mMediaPlayer.stop();
    }

    @Override
    public void onResume() {
        super.onResume();
        mMediaPlayer.start();
    }

This is how I set up the viewpager:

mViewPager = findViewById(R.id.video_player_viewPager);
        final ScreenSlidePagerAdapter slidePagerAdapter = new ScreenSlidePagerAdapter(this);
        mViewPager.setAdapter(slidePagerAdapter);

        mViewPager.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
        mViewPager.setOffscreenPageLimit(1);
        mViewPager.setPadding(90, 20, 90, 20);

        mViewPager.setPageTransformer(new ZoomOutPageTransformer());

        mViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                mTitleTextView.setText(mDataBase.get(position).getTitle());
            }
        });

The ScreenSlideAdapter:

private class ScreenSlidePagerAdapter extends FragmentStateAdapter {

        public ScreenSlidePagerAdapter(FragmentActivity fa) {
            super(fa);
        }

        @Override
        public Fragment createFragment(int position) {
            Video video = mDataBase.get(position);
            return VideoPlayerFragment.newInstance(video.getTitle());
        }

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

The ZoomOutPageTransformer is the one from here

This is the viewpager inside the activity XML:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@color/colorPrimaryDark">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/video_player_viewPager"
            android:clipToPadding="false"
            android:clipChildren="false"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </FrameLayout>

And this is the fragment's layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginLeft="@dimen/pageMarginAndOffset"
    android:layout_marginRight="@dimen/pageMarginAndOffset"
    android:layout_height="match_parent"
    app:cardCornerRadius="8dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextureView
            android:id="@+id/video_texture_view"
            android:layout_height="match_parent"
            android:layout_width="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            />

    </RelativeLayout>

</androidx.cardview.widget.CardView>

How can I play only the selected item's video inside the viewpager?

Answer 1

Play and pause the video player in Fragment#setMenuVisibility:

@Override
public void setMenuVisibility(boolean menuVisible) {
    super.setMenuVisibility(menuVisible);
    if (player != null) {
        player.setPlayWhenReady(menuVisible);
    }
}