Facebook like video player with fullscreen in recyclerView android Tutorial

In this tutorial we will create a video player inside recyclerView posts similar to facebook with fullscreen which will be played from web URL. We will use a library for this case. This video player looks more similar to MX Player -> a popular video player app for android.

Look at the above screenshots of what we are going to achieve in this tutorial.

Setting up Libraries:
Add following dependency to your build.gradle file and sync project.

    compile 'cn.jzvd:jiaozivideoplayer:6.0.2'

    compile 'com.danikula:videocache:2.7.0'
    compile 'com.github.bumptech.glide:glide:4.2.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'

Android provides its own videoView and media player apis for loading video in a view. But they have some disadvantages. We will use the above library for showing video in a simple view.
Same can be done in viewHolders of a reyclerView.

Add following in the layout file of your acitivty, fragment or viewholder for recyclerview:

              <cn.jzvd.JZVideoPlayerStandard
                    android:id="@+id/videoplayer"
                    android:layout_width="match_parent"
                    android:layout_height="200dp" />

Now in java file of your activity, fragment or ViewHolder add following code to display a video from url:

     JZVideoPlayerStandard jzVideoPlayerStandard = (JZVideoPlayerStandard) view.findViewById(R.id.videoplayer);

            HttpProxyCacheServer proxy = getProxy(this);
            jzVideoPlayerStandard.setUp(proxy.getProxyUrl(VIDEO_URL)
                    , JZVideoPlayerStandard.SCREEN_LAYOUT_LIST, TITLE_FOR_VIDEO);

            Glide.with(mContext).load(THUMBNAIL_URL).apply(new RequestOptions().override(50,50)).into(jzVideoPlayerStandard.thumbImageView);

Here VIDEO_URL is url for video, TITLE_FOR_VIDEO is a string for video title, THUMBNAIL_URL is url for showing thumbnail for video.

You also need to override backpress and pause of your Acitivity displaying video:

    @Override
    public void onBackPressed() {
        if (JZVideoPlayer.backPress()) {
           return;
        }
        JZVideoPlayer.releaseAllVideos();
      super.onBackPressed();
    }
    @Override
    protected void onPause() {
        super.onPause();
        JZVideoPlayer.releaseAllVideos();
    }

Now for the video cache to work, add the following code to your projects Application class:

public class MyApplication extends Application {
 
    private HttpProxyCacheServer proxy;

    public static HttpProxyCacheServer getProxy(Context context) {
        MyApplication app = (MyApplication) context.getApplicationContext();
        return app.proxy == null ? (app.proxy = app.newProxy()) : app.proxy;
    }

    private HttpProxyCacheServer newProxy() {
        return new HttpProxyCacheServer(this);
    }
}

Thats it! Now your video should work as the screenshots shown above.

14,731 total views, 1 views today