【Android 進階】仿抖音系列之列表播放視訊(二)
上一篇中,我們實現了仿抖音上下翻頁切換視訊的效果,詳見ofollow,noindex">【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一) ,這一篇,我們來實現抖音列表播放視訊。
- 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一)
- 【Android 進階】仿抖音系列之列表播放視訊(二)
- 【Android 進階】仿抖音系列之列表播放視訊(三)
- 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(四)
- 【Android 進階】仿抖音系列之視訊預覽和錄製(五)
之前也在github上找到一個demo,這是連結 ,原理和我的一樣,只是用起來比較麻煩。。。
先說下原理,這裡用到了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 ,其中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(); }