腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Android?通用視頻組件開發(fā)過程詳解

更新時(shí)間：2024年07月11日 10:30:37 作者：超低空MC

這篇文章主要介紹了Android?通用視頻組件開發(fā)的詳細(xì)過程,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

背景

目前車機(jī)的多媒體App都是各自維護(hù)自己的UI視圖及基礎(chǔ)邏輯，會(huì)有不少重復(fù)代碼。并且大多數(shù)媒體App都會(huì)和本地多媒體有交互，所有媒體App都會(huì)接入到MediaCenter，沒有統(tǒng)一的接口會(huì)導(dǎo)致接入適配成本和維護(hù)成本比較高。所以希望能夠抽出公共基礎(chǔ)功能到sdk中，供所有媒體App使用，從一致性和開發(fā)效率上得到提升。
應(yīng)用App：QQ音樂、杜比播放器、本地多媒體、迷你播放器

快速上手

為了應(yīng)對(duì)不同的使用場景，接入方式有兩種：

打包播放器和UI一鍵接入單獨(dú)視頻UI（自行實(shí)現(xiàn)播放器）
可根據(jù)實(shí)際使用場景選擇其一即可，如無特殊原因建議選擇第一種方式。

1 添加依賴

在app的Gradle中加入以下依賴：

implementation 'com.max.media:media-video:$mediaVersion'

2 初始化播放器

PlayerInitializer.init(context, isVideo = true, enableMediaCenter = true)

Context：上下文對(duì)象，必填
isVideo：視頻還是音頻，必填
enableMediaCenter ：是否接入媒體中心，默認(rèn)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對(duì)視頻組件進(jìn)行設(shè)置：

接口	說明
fun setTitleBarVisible(visible: Boolean)	隱藏視頻標(biāo)題欄，包括標(biāo)題和左側(cè)關(guān)閉
fun enableUpDownGesture(enable: Boolean)	設(shè)置是否支持上下手勢(shì)
bindControlView(listener: ControlViewListener)	綁定視頻控件UI，獲取組件UI控制器，可直接管理視頻組件。如果需要對(duì)視頻組件做更多操作可使用此接口（后文會(huì)詳細(xì)說明）

5 播放視頻

5.1 創(chuàng)建播放器

首先創(chuàng)建一個(gè)播放器FlexSimlePlayer：

class FlexSimplePlayer(context: Context?,
    isVideo: Boolean,
    enableParkDetect: Boolean = true,
    enableParkDialog: Boolean = true)

參數(shù)說明：

參數(shù)	說明
context	上下文；
enableParkDetect	只針對(duì)視頻生效，是否啟用行車娛樂限制，非駐車檔會(huì)自動(dòng)暫停視頻播放；
enableParkDialog	只針對(duì)視頻生效，是否彈出行車娛樂限制框，設(shè)置為disable后需要應(yīng)用可以自己實(shí)現(xiàn)提示界面；

5.2 開始播放

player.startPlay(context: Context,
        mediaData: List<MediaData>,
        view: FlexPlayerView?,
        listener: FlexMediaListener?,
        mediaCenterData: MediaCenterData? = null)

參數(shù)說明：

參數(shù)	說明
context	上下文，注意視頻播放要使用activity的context，因?yàn)樾熊噴蕵废拗菩枰獜椏?/td>
mediaData	媒體列表，每個(gè)媒體item包括url、metadata、mimetiype，其中url是媒體地址，可以是本地、在線點(diǎn)播或直播地址，medadata是media3的原始類型，title和artist字段會(huì)顯示在mini播放器和PSD上，mimeTypes指定媒體類型，url是對(duì)應(yīng)后綴的無需設(shè)置，有些比如優(yōu)酷投屏中有一個(gè)直播url是/m3u8結(jié)尾而不是.m3u8結(jié)尾需要設(shè)置mimeTypes = MimeTypes.APPLICATION_M3U8；
view	類型為FlexPlayerView，自實(shí)現(xiàn)UI的此參數(shù)設(shè)置為null
listener	媒體播放監(jiān)聽回調(diào)，具體回調(diào)接口后面詳細(xì)展開，不需要監(jiān)聽設(shè)置為null
mediaCenterData	媒體中心中需要用的數(shù)據(jù)，比如應(yīng)用包名、圖標(biāo)等，具體類型后面詳細(xì)展開，這里需要注意的是sourceType要設(shè)置為6，在媒體中心中對(duì)應(yīng)SourceType.SOURCE_TYPE_ONLINE。

5.3 更新播放列表

fun updateMediaItems(mediaData: List<MediaData>)

5.4 停止播放

player.stopPlay()

到這里，視頻就可以正常播放了。當(dāng)然這個(gè)是最簡單的播放，更多詳細(xì)的可以參考：統(tǒng)一媒體播放器接入指南

對(duì)于已有播放器且對(duì)播放器有特定要求的App而言，可以選擇單獨(dú)接入視頻UI，保持全局統(tǒng)一。

視頻組件設(shè)置接口

在快速上手第4步“配置視頻組件”中提到一個(gè)接口：bindControlView()

接口定義如下：

 /**
* 提供給APP的接口，用于APP定制視頻控制UI
*/
interface ControlViewListener {
    fun onBindView(controlView: IPlayerCallback.ViewController)
}

方法onBindeView返回的是ViewController，視頻組件提供的控制器，可以針對(duì)視頻組件進(jìn)行更細(xì)致的配置。

下面詳細(xì)講解ViewController，標(biāo)紅的為常用接口，希望重點(diǎn)關(guān)注！

1 設(shè)置全屏模式

 /**
* 設(shè)置2/3 屏樣式
*/
fun setAppFrameWH()
/**
* 設(shè)置全屏樣式
*/
fun setFullScreenWH()

全屏App必設(shè)接口

針對(duì)全屏和2/3屏有不同的UI樣式（包括ICON大小、間距等等），所以在切換全屏模式的時(shí)候一定要同步設(shè)置接口，否則UI布局會(huì)異常。默認(rèn)為2/3屏樣式

2 自定義功能Button

為了適配更多的應(yīng)用場景，我們將播放器下方最多5個(gè)Button開放兩種定制方法。最左側(cè)固定為播放按鈕，不能修改，其余5個(gè)均可以自定義，如果不設(shè)置則默認(rèn)不顯示。

對(duì)于只需要簡單設(shè)置button的icon和點(diǎn)擊事件的場景，可以直接使用方案一
對(duì)于需要對(duì)Button做更多定制功能的，比如動(dòng)效、動(dòng)態(tài)替換、長按、雙擊事件等，需要使用方案二

方案一

如前描述，通過此方法可以輕松修改Button的Icon及點(diǎn)擊事件

方法名非常直觀，如下：

 /**
* 設(shè)置Left Button2樣式
*  @param resId
*  @param clickListener 點(diǎn)擊事件
*/
fun setLeftButton2(
    @DrawableRes resId: Int = 0,
    clickListener: OnClickListener? = null,
    visible: Boolean = true,
)
/**
* 設(shè)置Left Button3樣式
*  @param resId
*  @param clickListener 點(diǎn)擊事件
*/
fun setLeftButton3(
    @DrawableRes resId: Int = 0,
    clickListener: OnClickListener? = null,
    visible: Boolean = true,
)
/**
* 設(shè)置right Button1樣式
*  @param resId
*  @param clickListener 點(diǎn)擊事件
*/
fun setRightButton1(
    @DrawableRes resId: Int = 0,
    clickListener: OnClickListener? = null,
    visible: Boolean = true,
)
/**
* 設(shè)置right Button2樣式
*  @param resId
*  @param clickListener 點(diǎn)擊事件
*/
fun setRightButton2(
    @DrawableRes resId: Int = 0,
    clickListener: OnClickListener? = null,
    visible: Boolean = true,
)
/**
* 設(shè)置right Button3樣式
*  @param resId
*  @param clickListener 點(diǎn)擊事件
*/
fun setRightButton3(
    @DrawableRes resId: Int = 0,
    clickListener: OnClickListener? = null,
    visible: Boolean = true,
)

顧名思義，找到你需要自定義的Button，按照參數(shù)設(shè)置即可

· 方案二

如果你需要針對(duì)Button做更深入的定制，那么可以通過以下接口直接拿到Button實(shí)例，則可以設(shè)置你需要的任何屬性。

 /**
* 獲取Button
*  @param viewType 根據(jù)Type獲取對(duì)應(yīng)的Button
*/
fun getButton(viewType: ButtonType): ImageView

3 獲取進(jìn)度條

對(duì)于部分App需要自定義進(jìn)度條，或者拿到進(jìn)度條實(shí)例做一些監(jiān)聽及修改，可以通過以下接口實(shí)現(xiàn)：

 /**
* 獲取進(jìn)度條
*/
fun getProgressBar(): FlexProgressBar

4 設(shè)置關(guān)閉按鈕左邊距

 /**
* 設(shè)置關(guān)閉按鈕距離
*/
fun setCloseMargin(left: Int, top: Int = CLOSE_MARGIN_TOP)

5 設(shè)置進(jìn)度條左右邊距

/**
* 設(shè)置進(jìn)度條距離
*/
fun setProgressMargin(bottom: Int,
                      left: Int = BOTTOM_BAR_MARGIN_LEFT,
                      right: Int = BOTTOM_BAR_MARGIN_RIGHT)

6 設(shè)置Loading延遲顯示時(shí)間

默認(rèn)1000ms內(nèi)的loading不進(jìn)行展示，若需要不控制loading時(shí)長則可以該屬性設(shè)置為0.

ViewController.loadingDelayDurationMillisecond

Q&A

1 可以讓播放器和視頻組件版本獨(dú)立嗎？

可以，并且這個(gè)是推薦的做法。

目前播放器內(nèi)部集成了視頻組件，也就是說只需要依賴視頻播放器即可包含視頻組件。但是視頻組件和播放器版本是分開管理的，可能播放器的版本是滯后的。建議依賴了視頻播放器之后，在單獨(dú)加一個(gè)視頻組件的依賴，如下：

implementation 'com.max.mediaplayer:uniteplayer:$playerVersion'
implementation 'com.max.media:media-video:$mediaVersion'

版本更新記錄

內(nèi)測(cè)版

僅SNAPSHOT：

**版本（內(nèi)測(cè)版，僅SNAPSHOT)	更新日志
0.5.0	1. 視頻基礎(chǔ)控制; 2. 支持配置底部icon的資源id和點(diǎn)擊事件
0.6.0	1. 修復(fù)手勢(shì)滑動(dòng)bug
0.6.2	1. 修復(fù)底部icon接口Bug
0.7.0	1. 增加了錯(cuò)誤頁提示 2. 修復(fù)部分rom不能調(diào)亮度的問題 3. 自適應(yīng)平板和車機(jī) 4. 修復(fù)暫停后拖動(dòng)進(jìn)度條持續(xù)loading的問題
0.8.6	1. 支持禁用上下滑手勢(shì) 2. 調(diào)整視頻View層級(jí)
0.9.0	1. 支持監(jiān)聽視頻組件的雙擊、長按事件 2. 去掉toggleControlView接口

正式版

版本	更新日志
1.0.0	1. 修改controlView實(shí)例的獲取方式，改為異步調(diào)用 2. 支持2/3屏和全屏兩套UI布局模式一鍵切換 1） 2/3屏模式：controlView.setAppFrameWH() 2）全屏模式：controlView.setFullScreenWH() 3. 支持自定義LoadingView、進(jìn)度條邊距及icon尺寸 4. 修改UI走查問題
1.1.0	1. 修復(fù)視頻時(shí)長小于1h時(shí)格式問題 2. 優(yōu)化上下手勢(shì)和Dock欄沖突 3. 調(diào)節(jié)亮度時(shí)取消自動(dòng)調(diào)節(jié)亮度勾選 4. 修復(fù)持續(xù)上下手勢(shì)，Tips閃爍 5. Loading態(tài)支持調(diào)起控件 6. 處理加載頁和錯(cuò)誤頁互斥邏輯
1.2.0	1. 上下手勢(shì)不主動(dòng)調(diào)起播控UI 2. 視頻手勢(shì)層級(jí)優(yōu)化 3. Loading支持播控UI調(diào)起 4. UI樣式優(yōu)化
1.2.2	1. 滑動(dòng)進(jìn)度條時(shí)，顯示進(jìn)度Tips 2. 進(jìn)度條及底部Bar優(yōu)化
1.2.3	1. 滑動(dòng)進(jìn)度，展示進(jìn)度Tips
1.2.5	1. 調(diào)整進(jìn)度條樣式
1.2.6	優(yōu)化全屏狀態(tài)下標(biāo)題欄位置
1.2.7	1. 優(yōu)化全屏Toast位置（居中改到頂部）
1.3.5	1. [視頻播放器UI]優(yōu)化在車機(jī)屏幕下雙擊/單擊事件的閾值和行為 2. [視頻播放器UI]優(yōu)化在電話場景下播放器依然能夠點(diǎn)擊的問題 3. [視頻播放器UI]支持自定義播放器UI控制效果 4. [視頻播放器UI]支持自定義loading延遲時(shí)長，默認(rèn)1s內(nèi)loading不顯示. 5. [視頻播放器UI]支持3/2全屏無縫播放效果 6. [音樂播放器]大小播放器設(shè)計(jì)/動(dòng)效支持