1. 程式人生 > >【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=
            
           

相關推薦

Android 仿系列列表播放視訊

上一篇中,我們實現了仿抖音上下翻頁切換視訊的效果,詳見【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一),這一篇,我們來實現抖音列表播放視訊。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一) 【Android 進階】仿抖音系列之列表播放視訊(二)

Android 仿系列列表播放視訊

在上一篇【Android 進階】仿抖音系列之列表播放視訊(二)中,我們實現列表播放視訊,這一篇我們來對其做些優化。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一) 【Android 進階】仿抖音系列之列表播放視訊(二) 【Android 進階】仿抖音

Android 仿系列翻頁上下滑切換視訊

大家好,我們又見面了。這是這個系列的第四篇,在這篇文章之前,建議可以先看下之前系列的文章,為了節省篇幅,之前詳細說過的地方,這裡就不再詳細描述了,下面是目錄: 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一) 【Android 進階】仿抖音系列之列表播放視訊

Android 仿系列翻頁上下滑切換視訊

最近公司在做個短視訊的專案,其中借鑑了很多抖音的設計,其中就有抖音的上下滑切換視訊。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一) 【Android 進階】仿抖音系列之列表播放視訊(二) 【Android 進階】仿抖音系列之列表播放視訊(三)

Android 仿系列視訊預覽和錄製

大家好,又見面了。在前幾篇中,我們通過2種方式實現了仿抖音的翻頁切換視訊,仿抖音列表播放視訊功能,這一篇,我們來說說視訊的錄製。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊(一) 【Android 進階】仿抖音系列之列表播放視訊(二) 【Android

Android(3)Android圖像處理

progress chang etc geo xtend static ogr arch 取出 1. 概念 色調/色相:物體傳遞的顏色 飽和度:顏色的純度,從0(灰)到100%(飽和)來進行描寫敘述 亮度/明度:顏色的相對明暗程度 2. 調整圖像小Demo 創建一個

AndroidJunit單元測試環境搭建以及簡單有用

rar theme 選擇 http 技術分享 才幹 ack package family 單元測試的目的 首先。Junit單元測試要實現的功能,就是用來測試寫好的方法是否可以正確的運行,一般多用於對業務方法的測試。 單元測試的環境配置 1.在Andro

Android 圖片載入框架Glide

生活 cannot 簡單介紹 style codes 詳細 npr 濾鏡 ive 簡單介紹 在泰國舉行的谷歌開發人員論壇上,谷歌為我們介紹了一個名叫 Glid

Android 一鍵清理

一鍵清理流程圖 系統快取分析 Android 已安裝 app /data/data/packagename/cache 資料夾和 /sdcard/Android/data/packagename/cache 資料夾組成 原生設定(Settings

Android實現各種各樣的Tab切換效果

一、View  + ViewPager 使用ViewPager和View實現切換效果,效果如下: 主佈局介面: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android Android自定義系列:邊緣凹凸的卡劵效果

所謂前人栽樹,後人乘涼,在此感謝博主的貢獻。 原文:邊緣凹凸的卡劵效果 先上效果圖: 我實現的效果和原博主實現的效果是不一樣的,我是左右邊緣凹凸,而博主是上下邊緣凹凸。其實理解了原理,哪個邊緣實現這個效果都是可以的。 實現原理: 直接

Android ORM 框架 greenDAO學習筆記

前言 當初學習Hibernate的時候就非常驚歎這種ORM思想,後來才知道原來Android中也有這種基於ORM思想的開源框架greenDAO。 greenDAO簡介: 簡單的講,greenDAO 是一個將物件對映到 SQLite 資料庫

Android判斷網路連線狀態並自動介面跳轉

用於判斷軟體開啟時的網路連線狀態,若無網路連線,提醒使用者跳轉到設定介面 /** * 設定在onStart()方法裡面,可以在介面每次獲得焦點的時候都進行檢測 */ @Override

Android如何寫一個很屌的動畫1---先實現一個簡易的自定義動畫框架

class MyView extends View { public void onDraw(Canvas canvas) { super.onDraw(canvas); invalidate(); } } 這樣一來,View每次繪製都是觸發下一次繪製,不過

Android CSDN新聞類客戶端-練手專案

無圖無真相: 宣告: 本專案資料全部來自CSDN官網,純練手之作,個人未從中獲取任何利益,資料的獲取與共享可能會侵犯到CSDN的權益,若被告知需停止共享與使用,本人會立即刪除整個專案。

Android 淘寶頭條:向上滾動廣告條ViewFlipper

所謂前人栽樹,後人乘涼,在此感謝博主的貢獻。 參考博文: 仿淘寶首頁的淘寶頭條View垂直滾動 歡迎關注我的微信公眾號 不只是原創技術文章,更多的是對生活的思考總結 我在博主的基礎上做了如下工作: 修復了滾動條第二條點選事件無法觸發這個

java專案實戰Servlet詳解以及Servlet編寫登陸頁面

       Servlet是Sun公司提供的一門用於開發動態web網頁的技術。Sun公司在API中提供了一個servlet介面,我們如果想使用java程式開發一個動態的web網頁,只需要實現servelet介面,並把類部署到web伺服器上就可以運行了。 到底什麼是Ser

怎樣寫程式碼實現物件的複用 -- 享元模式:解決方案

如果喜歡這裡的內容,你能夠給我最大的幫助就是轉發,告訴你的朋友,鼓勵他們一起來學習。 If you like the content here, you can give me the greatest help is forwarding, tell you

談談-Android-PickerView系列源碼解析

需求 動態 () comm tag 多個 來源 ntc 寬高 前言   WheelView想必大家或多或少都有一定了解, 它是一款3D滾輪控件,效果類似IOS 上面的UIpickerview 。按照國際慣例,先放一張效果圖:   以上是Android-PickerView

androidFirefly-RK系列eg:RK3288 RK3368App實現重啟、靜默安裝應用

本文的方法只是實現手段的一種,不可能完全適用所有裝置哦,試試才知道。 實現重啟 考慮到裝置需要遠端或自動重啟的場景(比如通過遠端推送的方式下發重啟指令、裝置定時重啟緩解資源緊張等),下面提供一種思路: public static void