How can I play videos from Firebase services like TikTok and Instagram loops in Viewpager2?

Tech QnA
1

I have a set of video views with a firebase storage video link, but I want to play videos like TikTok and Instagram reel do when the video view is switched to viewpager2.

1 Like
2

One strategy would be to handle video playback with a library like ExoPlayer and then store and get the video URLs using a Firebase Realtime Database. The videos can then be added to the pages using a custom ViewPager2 adapter, and ExoPlayer can be used to play the films as the user swipes across the pages.

Follow these steps:

  1. Added Dependencies
    Install all the required dependencies in your build.gradle file. For example,
implementation 'com.google.firebase:firebase-storage:22.0.0'
implementation 'com.google.firebase:firebase-database:22.0.0'
implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'com.google.android.exoplayer:exoplayer:2.15.0'

Replace the numbers with the latest version.

  1. Configure your Android project to use Firebase Storage after setting up Firebase.

  2. To represent the video data you have, create a model class. The way it looks might look like this:

public class Video {
    private String videoUrl;

    public Video(String videoUrl) {
        this.videoUrl = videoUrl;
    }

    public String getVideoUrl() {
        return videoUrl;
    }
}
  1. Make a ViewPager2 adaptor that plays videos using ExoPlayer.
  2. For your ViewPager2 adapter, create a ViewHolder class. The player view will be initialized and updated by this class.
  3. Create layout files for the player view, the ViewPager2 item, and the main activity.
  4. Configure the ViewPager2 with the adaptor and manage the video playback in your primary activity.

This is only a basic sketch; you might need to alter it to fit your unique needs. Furthermore, remember that memory leaks can be prevented by treating the ExoPlayer instance effectively, taking lifecycle events into account, and releasing resources in the right way.

3

AFAIK, you can store the video in Firebase Storage and the video URLs and information in Firebase Database. The clips can then be added to the ViewPager2 using a FirebaseRecyclerAdapter.
This method allows you to load the videos into ExoPlayer or VideoView using the Glide library.

4

Thanks for your answers but do both methods handle the events like pausing or restarting the videos?

5

Yes, in both scenarios, handling the required lifecycle events is also required to guarantee that the films are properly paused, restarted, and delivered as the user navigates the app.

6

While trying the suggested methods, ExoPlayer is getting 403 responses from the server, what should I do now?

7

The common meaning of a 403 response from a server is that the client does not have the authorization to access the requested resource. In order to access the resource, the client might need to authenticate or give the server legitimate credentials.
Additionally, the server could be set up to prevent specific user agents or IP addresses from accessing the resource. Verify the accuracy of the provided credentials and whether the server is set up to permit access from your client.