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.
15,634 total views, 3 views today