仿抖音系列之列表播放视频

* 【Android 进阶】仿抖音系列之翻页上下滑切换视频（一） <https://www.jianshu.com/p/2c71f699c5c4>
* 【Android 进阶】仿抖音系列之列表播放视频（二） <https://www.jianshu.com/p/ee6b7c200c9c>
* 【Android 进阶】仿抖音系列之列表播放视频（三） <https://www.jianshu.com/p/15a70f242c4d>
* 【Android 进阶】仿抖音系列之翻页上下滑切换视频（四） <https://www.jianshu.com/p/e0bd595d6321>
* 【Android 进阶】仿抖音系列之视频预览和录制（五） <https://www.jianshu.com/p/dc63d77b6761>
之前也在github上找到一个demo,这是链接 <https://github.com/danylovolokh/VideoPlayerManager>
，原理和我的一样，只是用起来比较麻烦。。。

先说下原理，这里用到了RecyclerView的onScrolled和onScrollStateChanged
监听，在onScrolled中判断当前可见的position，结合onScrollStateChanged中返回的当前RecyclerView的滑动状态，当是拖动和停止滚动时，可以播放；当是惯性滑动时，暂停播放。


关于RecyclerView3种滑动状态，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://image.38.hn/public/attachment/201805/100651/201805181532123423.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803151735198462.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150923220770.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150922255785.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803150920130302.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141625005241.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803141624378522.mp4");
urlList.add("http://image.38.hn/public/attachment/201803/100651/201803131546119319.mp4");
videoAdapter = new ListVideoAdapter(urlList); rvList.setLayoutManager(new
LinearLayoutManager(ListActivity.this)); rvList.setAdapter(videoAdapter);
Adapter这里自己做了个封装，可以用原生或者其他封装比较好的，这里就不贴了
class ListVideoAdapter extends BaseRecAdapter<String, VideoViewHolder> {
public ListVideoAdapter(List<String> 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); } }
布局如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical"> <TextView android:id="@+id/tv_title"
android:layout_width="match_parent" android:layout_height="50dp"
android:gravity="center" android:textSize="18sp" />
<com.ch.doudemo.widget.MyVideoPlayer android:id="@+id/mp_video"
android:layout_width="match_parent" android:layout_height="500dp" />
</LinearLayout>
这里使用的是 JiaoZiVideoPlayer <https://github.com/lipangit/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的布局，覆盖在播放器上，这样实际上点击的是我们添加的布局


这里有个小技巧，可以粘贴源码中的布局，重要的事情说三遍，不要修改文件名、不要修改文件名、不要修改文件名，找到相关布局，设置android:visibility="gone"，这样我们的项目中的布局就会替换掉原来的布局。

完整代码如下

jz_layout_standard.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="@android:color/black"
android:descendantFocusability="blocksDescendants"> <FrameLayout
android:id="@+id/surface_container" android:layout_width="match_parent"
android:layout_height="match_parent"> </FrameLayout> <ImageView
android:id="@+id/thumb" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:layout_alignParentStart="true"
android:background="#000000" android:scaleType="fitCenter" /> <LinearLayout
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:visibility="gone"> <LinearLayout android:id="@+id/layout_bottom"
android:layout_width="match_parent" android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@drawable/jz_bottom_bg" android:gravity="center_vertical"
android:orientation="horizontal" android:visibility="invisible"> <TextView
android:id="@+id/current" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginLeft="14dp"
android:text="00:00" android:textColor="#ffffff" /> <SeekBar
android:id="@+id/bottom_seek_progress" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_gravity="center_vertical"
android:layout_weight="1.0" android:background="@null" android:max="100"
android:maxHeight="1dp" android:minHeight="1dp" android:paddingBottom="8dp"
android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="8dp"
android:progressDrawable="@drawable/jz_bottom_seek_progress"
android:thumb="@drawable/jz_bottom_seek_thumb" /> <TextView
android:id="@+id/total" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="00:00"
android:textColor="#ffffff" /> <TextView android:id="@+id/clarity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:clickable="true" android:paddingLeft="20dp" android:text="clarity"
android:textAlignment="center" android:textColor="#ffffff" /> <ImageView
android:id="@+id/fullscreen" android:layout_width="52.5dp"
android:layout_height="fill_parent" android:paddingLeft="14dp"
android:paddingRight="14dp" android:scaleType="centerInside"
android:src="@drawable/jz_enlarge" /> </LinearLayout> </LinearLayout>
<ProgressBar android:id="@+id/bottom_progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent" android:layout_height="1.5dp"
android:layout_alignParentBottom="true" android:max="100"
android:progressDrawable="@drawable/jz_bottom_progress" /> <ImageView
android:id="@+id/back_tiny" android:layout_width="24dp"
android:layout_height="24dp" android:layout_marginLeft="6dp"
android:layout_marginTop="6dp"
android:background="@drawable/jz_click_back_tiny_selector"
android:visibility="gone" /> <LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="horizontal"
android:visibility="gone"> <RelativeLayout android:id="@+id/layout_top"
android:layout_width="match_parent" android:layout_height="60dp"
android:layout_alignParentLeft="true" android:layout_alignParentStart="true"
android:layout_alignParentTop="true" android:background="@drawable/jz_title_bg"
android:gravity="center_vertical"> <ImageView android:id="@+id/back"
android:layout_width="23dp" android:layout_height="match_parent"
android:layout_alignParentLeft="true" android:layout_alignParentStart="true"
android:layout_alignParentTop="true" android:paddingLeft="12dp"
android:paddingStart="12dp" android:scaleType="centerInside"
android:src="@drawable/jz_click_back_selector" /> <TextView
android:id="@+id/title" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_centerVertical="true"
android:layout_marginEnd="12dp" android:layout_marginLeft="12dp"
android:layout_marginRight="12dp" android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/back"
android:layout_toLeftOf="@+id/battery_time_layout"
android:layout_toRightOf="@+id/back" android:ellipsize="end"
android:maxLines="2" android:textColor="#ffffff" android:textSize="18sp" />
<LinearLayout android:id="@+id/battery_time_layout"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentEnd="true" android:layout_alignParentRight="true"
android:layout_centerVertical="true" android:layout_marginEnd="14dp"
android:layout_marginRight="14dp" android:gravity="center_vertical"
android:orientation="vertical"> <ImageView android:id="@+id/battery_level"
android:layout_width="23dp" android:layout_height="10dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/jz_battery_level_10" /> <TextView
android:id="@+id/video_current_time" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:gravity="center_vertical" android:maxLines="1"
android:textColor="#ffffffff" android:textSize="12.0sp" /> </LinearLayout>
</RelativeLayout> </LinearLayout> <ProgressBar android:id="@+id/loading"
android:layout_width="@dimen/jz_start_button_w_h_normal"
android:layout_height="@dimen/jz_start_button_w_h_normal"
android:layout_centerHorizontal="true" android:layout_centerVertical="true"
android:indeterminateDrawable="@drawable/jz_loading"
android:visibility="invisible" /> <LinearLayout
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:visibility="gone"> <LinearLayout
android:id="@+id/start_layout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"> <ImageView android:id="@+id/start"
android:layout_width="@dimen/jz_start_button_w_h_normal"
android:layout_height="@dimen/jz_start_button_w_h_normal"
android:src="@drawable/jz_click_play_selector" /> </LinearLayout> <TextView
android:id="@+id/replay_text" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="@+id/start_layout"
android:layout_centerHorizontal="true" android:layout_marginTop="6dp"
android:text="@string/replay" android:textColor="#ffffff"
android:textSize="12sp" android:visibility="invisible" /> <LinearLayout
android:id="@+id/retry_layout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_centerHorizontal="true"
android:layout_centerVertical="true" android:gravity="center_horizontal"
android:orientation="vertical"> <TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="@string/video_loading_faild"
android:textColor="@android:color/white" android:textSize="14sp" /> <TextView
android:id="@+id/retry_btn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginTop="15dp"
android:background="@drawable/retry_bg" android:paddingBottom="4dp"
android:paddingLeft="9dp" android:paddingRight="9dp" android:paddingTop="4dp"
android:text="@string/click_to_restart"
android:textColor="@android:color/white" android:textSize="14sp" />
</LinearLayout> </LinearLayout> <RelativeLayout android:id="@+id/rl_touch_help"
android:layout_width="match_parent" android:layout_height="match_parent"
android:alpha="0" android:background="@color/cf0f2f7"></RelativeLayout>
<LinearLayout android:id="@+id/ll_start" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" android:padding="15dp"
android:visibility="gone"> <ImageView android:id="@+id/iv_start"
android:layout_width="16dp" android:layout_height="18dp"
android:background="@mipmap/stop" /> </LinearLayout> </RelativeLayout>
还需要实现循环播放，这个比较简单，重写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(); }
到这里，列表播放这个功能已经完成了。

最后，献上完整代码。Github <https://github.com/18702953620/DouDemo>




转载链接：https://www.jianshu.com/p/ee6b7c200c9c
 

• « 上一篇：你最喜欢的“吃鸡”竟是Python写的吗？
• » 下一篇：C#并行编程（6）：线程同步面面观