前言
上一篇中,我们实现了仿抖音上下翻页切换视频的效果,这一篇,我们来实现抖音列表播放视频。
- 【Android 进阶】仿抖音系列之翻页上下滑切换视频(一)
- 【Android 进阶】仿抖音系列之列表播放视频(二)
- 【Android 进阶】仿抖音系列之列表播放视频(三)
- 【Android 进阶】仿抖音系列之翻页上下滑切换视频(四)
- 【Android 进阶】仿抖音系列之视频预览和录制(五)
之前也在github上找到一个demo,这是链接,原理和我的一样,只是用起来比较麻烦。。。
思路
这里用到了RecyclerView
的onScrolled
和onScrollStateChanged
监听,在onScrolled
中判断当前可见的position
,结合onScrollStateChanged
中返回的当前RecyclerView
的滑动状态,当是拖动和停止滚动时,可以播放;当是惯性滑动时,暂停播放。
tip: 关于RecyclerView
3种滑动状态,RecyclerView.SCROLL_STATE_IDLE
,RecyclerView.SCROLL_STATE_DRAGGING
,RecyclerView.SCROLL_STATE_SETTLING
,大家可以自行百度,这里不做过多的描述了。
rvList.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
firstVisibleItem = layoutManager.findFirstVisibleItemPosition();
lastVisibleItem = layoutManager.findLastVisibleItemPosition();
}
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE://停止滚动
/**在这里执行,视频的自动播放与停止*/
autoPlayVideo(recyclerView);
break;
case RecyclerView.SCROLL_STATE_DRAGGING://拖动
autoPlayVideo(recyclerView);
break;
case RecyclerView.SCROLL_STATE_SETTLING://惯性滑动
JZVideoPlayer.releaseAllVideos();
break;
}
}
});
布局就是一个RecyclerView
,就不贴了,下面是Adapter
urlList = new ArrayList<>();
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201805/100651/201805181532123423.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803151735198462.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803150923220770.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803150922255785.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803150920130302.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803141625005241.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803141624378522.mp4");
urlList.add("http://chuangfen.oss-cn-hangzhou.aliyuncs.com/public/attachment/201803/100651/201803131546119319.mp4");
videoAdapter = new ListVideoAdapter(urlList);
rvList.setLayoutManager(new LinearLayoutManager(ListActivity.this));
rvList.setAdapter(videoAdapter);
Adapter
这里自己做了个封装,可以用原生或者其他封装比较好的,这里就不贴了
class ListVideoAdapter extends BaseRecAdapter {
public ListVideoAdapter(List list) {
super(list);
}
@Override
public void onHolder(VideoViewHolder holder, String bean, int position) {
holder.mp_video.setUp(bean, JZVideoPlayerStandard.CURRENT_STATE_NORMAL);
if (position == 0) {
holder.mp_video.startVideo();
}
Glide.with(context).load(bean).into(holder.mp_video.thumbImageView);
holder.tv_title.setText("第" + position + "个视频");
}
@Override
public VideoViewHolder onCreateHolder() {
return new VideoViewHolder(getViewByRes(R.layout.item_video));
}
}
public class VideoViewHolder extends BaseRecViewHolder {
public View rootView;
public MyVideoPlayer mp_video;
public TextView tv_title;
public VideoViewHolder(View rootView) {
super(rootView);
this.rootView = rootView;
this.mp_video = rootView.findViewById(R.id.mp_video);
this.tv_title = rootView.findViewById(R.id.tv_title);
}
}
item_video.xml
布局如下
这里使用的是 JiaoZiVideoPlayer,其中MyVideoPlayer
是之前公司项目需要,对其做的个性化定制,这里下面再说。
下来就是本篇的核心,通过判断可见项,暂停/播放视频,代码如下
/**
* 自动播放
*/
private void autoPlayVideo(RecyclerView recyclerView) {
if (firstVisibleItem == 0 && lastVisibleItem == 0 && recyclerView.getChildAt(0) != null) {
MyVideoPlayer videoView = null;
if (recyclerView != null && recyclerView.getChildAt(0) != null) {
videoView = recyclerView.getChildAt(0).findViewById(R.id.mp_video);
}
if (videoView != null) {
if (videoView.currentState == JZVideoPlayer.CURRENT_STATE_NORMAL || videoView.currentState == JZVideoPlayer.CURRENT_STATE_PAUSE) {
videoView.startVideo();
}
}
}
for (int i = 0; i <= lastVisibleItem; i++) {
if (recyclerView == null || recyclerView.getChildAt(i) == null) {
return;
}
MyVideoPlayer
videoView = recyclerView.getChildAt(i).findViewById(R.id.mp_video);
if (videoView != null) {
Rect rect = new Rect();
//获取视图本身的可见坐标,把值传入到rect对象中
videoView.getLocalVisibleRect(rect);
//获取视频的高度
int videoHeight = videoView.getHeight();
if (rect.top <= 100 && rect.bottom >= videoHeight) {
if (videoView.currentState == JZVideoPlayer.CURRENT_STATE_NORMAL || videoView.currentState == JZVideoPlayer.CURRENT_STATE_PAUSE) {
videoView.startVideo();
}
return;
}
JZVideoPlayer.releaseAllVideos();
} else {
JZVideoPlayer.releaseAllVideos();
}
}
}
顺便说一下,为啥用JiaoZiVideoPlayer
,就是因为 JZVideoPlayer.releaseAllVideos();
,一句代码就可以暂停所有的播放器,否则自己要实现这个还是比较麻烦的
到这里,大概功能已经实现了,下面说说定制化的功能。
需要去掉原播放器的进度条、按钮,点击视频,全屏播放,再次点击取消全屏。
我的做法是添加一个透明度为0的布局,覆盖在播放器上,这样实际上点击的是我们添加的布局
tip:这里有个小技巧,可以粘贴源码中的布局,重要的事情说三遍,不要修改文件名、不要修改文件名、不要修改文件名,找到相关布局,设置android:visibility="gone"
,这样我们的项目中的布局就会替换掉原来的布局。
jz_layout_standard.xml
代码如下
还需要实现循环播放,这个比较简单,重写onAutoCompletion
方法,当其播放完成时,继续播放即可。
@Override
public void onAutoCompletion() {
thumbImageView.setVisibility(View.GONE);
if (currentScreen == SCREEN_WINDOW_FULLSCREEN) {
onStateAutoComplete();
setUp((String) getCurrentUrl(), JZVideoPlayer.SCREEN_WINDOW_FULLSCREEN);
} else {
super.onAutoCompletion();
setUp((String) getCurrentUrl(), JZVideoPlayer.CURRENT_STATE_NORMAL);
}
//循环播放
startVideo();
}
到这里,列表播放这个功能已经完成了。