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