Android?通用視頻組件開發(fā)過程詳解
背景
- 目前車機的多媒體App都是各自維護自己的UI視圖及基礎(chǔ)邏輯,會有不少重復(fù)代碼。并且大多數(shù)媒體App都會和本地多媒體有交互,所有媒體App都會接入到MediaCenter,沒有統(tǒng)一的接口會導(dǎo)致接入適配成本和維護成本比較高。所以希望能夠抽出公共基礎(chǔ)功能到sdk中,供所有媒體App使用,從一致性和開發(fā)效率上得到提升。
- 應(yīng)用App:QQ音樂、杜比播放器、本地多媒體、迷你播放器
快速上手
為了應(yīng)對不同的使用場景,接入方式有兩種:
- 打包播放器和UI一鍵接入單獨視頻UI(自行實現(xiàn)播放器)
- 可根據(jù)實際使用場景選擇其一即可,如無特殊原因建議選擇第一種方式。
1 添加依賴
在app的Gradle中加入以下依賴:
implementation 'com.max.media:media-video:$mediaVersion'
2 初始化播放器
PlayerInitializer.init(context, isVideo = true, enableMediaCenter = true)
- Context:上下文對象,必填
- isVideo:視頻還是音頻,必填
- enableMediaCenter :是否接入媒體中心,默認true
3 接入視頻UI組件
添加FlexPlayerView布局,用于展示視頻內(nèi)容及播控組件:
<com.flex.uniteplayer.ui.FlexPlayerView android:id="@+id/player_view" android:layout_width="match_parent" android:layout_height="match_parent"/>
4 配置視頻組件
可通過FlexPlayerView對視頻組件進行設(shè)置:
接口 | 說明 |
---|---|
fun setTitleBarVisible(visible: Boolean) | 隱藏視頻標(biāo)題欄,包括標(biāo)題和左側(cè)關(guān)閉 |
fun enableUpDownGesture(enable: Boolean) | 設(shè)置是否支持上下手勢 |
bindControlView(listener: ControlViewListener) | 綁定視頻控件UI,獲取組件UI控制器,可直接管理視頻組件。如果需要對視頻組件做更多操作可使用此接口(后文會詳細說明) |
5 播放視頻
5.1 創(chuàng)建播放器
首先創(chuàng)建一個播放器FlexSimlePlayer:
class FlexSimplePlayer(context: Context?, isVideo: Boolean, enableParkDetect: Boolean = true, enableParkDialog: Boolean = true)
參數(shù)說明:
參數(shù) | 說明 |
---|---|
context | 上下文; |
enableParkDetect | 只針對視頻生效,是否啟用行車娛樂限制,非駐車檔會自動暫停視頻播放; |
enableParkDialog | 只針對視頻生效,是否彈出行車娛樂限制框,設(shè)置為disable后需要應(yīng)用可以自己實現(xiàn)提示界面; |
5.2 開始播放
player.startPlay(context: Context, mediaData: List<MediaData>, view: FlexPlayerView?, listener: FlexMediaListener?, mediaCenterData: MediaCenterData? = null)
參數(shù)說明:
參數(shù) | 說明 |
---|---|
context | 上下文,注意視頻播放要使用activity的context,因為行車娛樂限制需要彈框 |
mediaData | 媒體列表,每個媒體item包括url、metadata、mimetiype,其中url是媒體地址,可以是本地、在線點播或直播地址,medadata是media3的原始類型,title和artist字段會顯示在mini播放器和PSD上,mimeTypes指定媒體類型,url是對應(yīng)后綴的無需設(shè)置,有些比如優(yōu)酷投屏中有一個直播url是/m3u8結(jié)尾 而不是.m3u8結(jié)尾 需要設(shè)置mimeTypes = MimeTypes.APPLICATION_M3U8; |
view | 類型為FlexPlayerView,自實現(xiàn)UI的此參數(shù)設(shè)置為null |
listener | 媒體播放監(jiān)聽回調(diào),具體回調(diào)接口后面詳細展開,不需要監(jiān)聽設(shè)置為null |
mediaCenterData | 媒體中心中需要用的數(shù)據(jù),比如應(yīng)用包名、圖標(biāo)等,具體類型后面詳細展開,這里需要注意的是sourceType要設(shè)置為6,在媒體中心中對應(yīng)SourceType.SOURCE_TYPE_ONLINE。 |
5.3 更新播放列表
fun updateMediaItems(mediaData: List<MediaData>)
5.4 停止播放
player.stopPlay()
到這里,視頻就可以正常播放了。當(dāng)然這個是最簡單的播放,更多詳細的可以參考:統(tǒng)一媒體播放器接入指南
對于已有播放器且對播放器有特定要求的App而言,可以選擇單獨接入視頻UI,保持全局統(tǒng)一。
視頻組件設(shè)置接口
在快速上手第4步“配置視頻組件”中提到一個接口:bindControlView()
接口定義如下:
/** * 提供給APP的接口,用于APP定制視頻控制UI */ interface ControlViewListener { fun onBindView(controlView: IPlayerCallback.ViewController) }
方法onBindeView
返回的是ViewController
,視頻組件提供的控制器,可以針對視頻組件進行更細致的配置。
下面詳細講解ViewController
,標(biāo)紅的為常用接口,希望重點關(guān)注!
1 設(shè)置全屏模式
/** * 設(shè)置2/3 屏樣式 */ fun setAppFrameWH() /** * 設(shè)置全屏樣式 */ fun setFullScreenWH()
全屏App必設(shè)接口
針對全屏和2/3屏有不同的UI樣式(包括ICON大小、間距等等),所以在切換全屏模式的時候一定要同步設(shè)置接口,否則UI布局會異常。默認為2/3屏樣式
2 自定義功能Button
為了適配更多的應(yīng)用場景,我們將播放器下方最多5個Button開放兩種定制方法。最左側(cè)固定為播放按鈕,不能修改,其余5個均可以自定義,如果不設(shè)置則默認不顯示。
- 對于只需要簡單設(shè)置button的icon和點擊事件的場景,可以直接使用方案一
- 對于需要對Button做更多定制功能的,比如動效、動態(tài)替換、長按、雙擊事件等,需要使用方案二
方案一
如前描述,通過此方法可以輕松修改Button的Icon及點擊事件
方法名非常直觀,如下:
/** * 設(shè)置Left Button2樣式 * @param resId * @param clickListener 點擊事件 */ fun setLeftButton2( @DrawableRes resId: Int = 0, clickListener: OnClickListener? = null, visible: Boolean = true, ) /** * 設(shè)置Left Button3樣式 * @param resId * @param clickListener 點擊事件 */ fun setLeftButton3( @DrawableRes resId: Int = 0, clickListener: OnClickListener? = null, visible: Boolean = true, ) /** * 設(shè)置right Button1樣式 * @param resId * @param clickListener 點擊事件 */ fun setRightButton1( @DrawableRes resId: Int = 0, clickListener: OnClickListener? = null, visible: Boolean = true, ) /** * 設(shè)置right Button2樣式 * @param resId * @param clickListener 點擊事件 */ fun setRightButton2( @DrawableRes resId: Int = 0, clickListener: OnClickListener? = null, visible: Boolean = true, ) /** * 設(shè)置right Button3樣式 * @param resId * @param clickListener 點擊事件 */ fun setRightButton3( @DrawableRes resId: Int = 0, clickListener: OnClickListener? = null, visible: Boolean = true, )
顧名思義,找到你需要自定義的Button,按照參數(shù)設(shè)置即可
· 方案二
如果你需要針對Button做更深入的定制,那么可以通過以下接口直接拿到Button實例,則可以設(shè)置你需要的任何屬性。
/** * 獲取Button * @param viewType 根據(jù)Type獲取對應(yīng)的Button */ fun getButton(viewType: ButtonType): ImageView
3 獲取進度條
對于部分App需要自定義進度條,或者拿到進度條實例做一些監(jiān)聽及修改,可以通過以下接口實現(xiàn):
/** * 獲取進度條 */ fun getProgressBar(): FlexProgressBar
4 設(shè)置關(guān)閉按鈕左邊距
/** * 設(shè)置關(guān)閉按鈕距離 */ fun setCloseMargin(left: Int, top: Int = CLOSE_MARGIN_TOP)
5 設(shè)置進度條左右邊距
/** * 設(shè)置進度條距離 */ fun setProgressMargin(bottom: Int, left: Int = BOTTOM_BAR_MARGIN_LEFT, right: Int = BOTTOM_BAR_MARGIN_RIGHT)
6 設(shè)置Loading延遲顯示時間
默認1000ms內(nèi)的loading不進行展示,若需要不控制loading時長則可以該屬性設(shè)置為0.
ViewController.loadingDelayDurationMillisecond
Q&A
1 可以讓播放器和視頻組件版本獨立嗎?
可以,并且這個是推薦的做法。
目前播放器內(nèi)部集成了視頻組件,也就是說只需要依賴視頻播放器即可包含視頻組件。但是視頻組件和播放器版本是分開管理的,可能播放器的版本是滯后的。建議依賴了視頻播放器之后,在單獨加一個視頻組件的依賴,如下:
implementation 'com.max.mediaplayer:uniteplayer:$playerVersion' implementation 'com.max.media:media-video:$mediaVersion'
版本更新記錄
內(nèi)測版
僅SNAPSHOT:
**版本(內(nèi)測版,僅SNAPSHOT) | 更新日志 |
---|---|
0.5.0 | 1. 視頻基礎(chǔ)控制; 2. 支持配置底部icon的資源id和點擊事件 |
0.6.0 | 1. 修復(fù)手勢滑動bug |
0.6.2 | 1. 修復(fù)底部icon接口Bug |
0.7.0 | 1. 增加了錯誤頁提示 2. 修復(fù)部分rom不能調(diào)亮度的問題 3. 自適應(yīng)平板和車機 4. 修復(fù)暫停后拖動進度條持續(xù)loading的問題 |
0.8.6 | 1. 支持禁用上下滑手勢 2. 調(diào)整視頻View層級 |
0.9.0 | 1. 支持監(jiān)聽視頻組件的雙擊、長按事件 2. 去掉toggleControlView接口 |
正式版
版本 | 更新日志 |
---|---|
1.0.0 | 1. 修改controlView實例的獲取方式,改為異步調(diào)用 2. 支持2/3屏和全屏兩套UI布局模式一鍵切換 1) 2/3屏模式:controlView.setAppFrameWH() 2)全屏模式:controlView.setFullScreenWH() 3. 支持自定義LoadingView、進度條邊距及icon尺寸 4. 修改UI走查問題 |
1.1.0 | 1. 修復(fù)視頻時長小于1h時格式問題 2. 優(yōu)化上下手勢和Dock欄沖突 3. 調(diào)節(jié)亮度時取消自動調(diào)節(jié)亮度勾選 4. 修復(fù)持續(xù)上下手勢,Tips閃爍 5. Loading態(tài)支持調(diào)起控件 6. 處理加載頁和錯誤頁互斥邏輯 |
1.2.0 | 1. 上下手勢不主動調(diào)起播控UI 2. 視頻手勢層級優(yōu)化 3. Loading支持播控UI調(diào)起 4. UI樣式優(yōu)化 |
1.2.2 | 1. 滑動進度條時,顯示進度Tips 2. 進度條及底部Bar優(yōu)化 |
1.2.3 | 1. 滑動進度,展示進度Tips |
1.2.5 | 1. 調(diào)整進度條樣式 |
1.2.6 | 優(yōu)化全屏狀態(tài)下標(biāo)題欄位置 |
1.2.7 | 1. 優(yōu)化全屏Toast位置(居中改到頂部) |
1.3.5 | 1. [視頻播放器UI]優(yōu)化在車機屏幕下雙擊/單擊事件的閾值和行為 2. [視頻播放器UI]優(yōu)化在電話場景下播放器依然能夠點擊的問題 3. [視頻播放器UI]支持自定義播放器UI控制效果 4. [視頻播放器UI]支持自定義loading延遲時長,默認1s內(nèi)loading不顯示. 5. [視頻播放器UI]支持3/2全屏無縫播放效果 6. [音樂播放器]大小播放器設(shè)計/動效支持 |
到此這篇關(guān)于Android 通用視頻組件開發(fā)的文章就介紹到這了,更多相關(guān)android 視頻組件開發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實現(xiàn)加載時提示“正在加載,請稍后”的方法
在現(xiàn)在的很多應(yīng)用中,當(dāng)在加載的時候,如果頁面動態(tài)數(shù)據(jù)較多,會有很長一段時間的空白頁面,如果加上這個頁面正在加載的提示,使得應(yīng)用更加人性化。這篇文章就給大家分享了在 Android實現(xiàn)加載時提示“正在加載,請稍后”的方法,有需要的朋友們可以參考借鑒。2016-10-10Android SwipeRefreshLayout超詳細講解
在android開發(fā)中,使用最多的數(shù)據(jù)刷新方式就是下拉刷新了,而完成此功能我們使用最多的就是第三方的開源庫PullToRefresh。現(xiàn)如今,google也忍不住推出了自己的下拉組件SwipeRefreshLayout,下面我們通過api文檔和源碼來分析學(xué)習(xí)如何使用SwipeRefreshLayout2022-11-11XListView實現(xiàn)下拉刷新和上拉加載原理解析
這篇文章主要為大家解析了XListView實現(xiàn)下拉刷新和上拉加載原理,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12View中如何進行手勢識別onFling動作實現(xiàn)介紹
下面我們就以實現(xiàn)手勢識別的onFling動作,在CwjView中我們從View類繼承,當(dāng)然大家可以從TextView等更高層的界面中實現(xiàn)觸控,感興趣的朋友可以了解下哈2013-06-06Android使用WindowManager構(gòu)造懸浮view
這篇文章主要為大家詳細介紹了Android使用WindowManager構(gòu)造懸浮view的具體方法,感興趣的小伙伴們可以參考一下2016-05-05Android修行手冊之ConstraintLayout布局使用詳解
這篇文章主要為大家介紹了Android修行手冊之ConstraintLayout使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09Android ScrollView實現(xiàn)反彈效果的實例
這篇文章主要介紹了 Android ScrollView實現(xiàn)反彈效果的實例的相關(guān)資料,這里自定義scrollview 并實現(xiàn)反彈效果,需要的朋友可以參考下2017-07-07百度語音識別(Baidu Voice) Android studio版本詳解
這篇文章主要介紹了百度語音識別(Baidu Voice) Android studio版本詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09