Exoplayer的详细使用UI篇

1. ExoPlayer中的UI主要分

1. 主视频播放控件PlayerView 、StyledPlayerView
2. 控制控件PlayerControlView
3. 主视频覆盖view，exo_overlay

其他还有包括字幕，插图等控件

2. 使用方式

控件PlayerView与PlayerControlView都提供的是布局layout id设置方式来让用户自定义界面。

在控件中解析layout id中特定id的控件来达到用户自定义布局中的控件与视频播放ExoPlayer关联

<com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/player_view"
        app:auto_show="false"
        app:fastforward_increment="30000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:player_layout_id="@layout/live_playback_custom_player_view_layout"  />

live_playback_custom_player_view.xml

    <FrameLayout
        android:id="@id/exo_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.up366.mobile.live.air.view.AirTeachLiveStateView
            android:id="@+id/live_state_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"/>
    </FrameLayout>

    <com.google.android.exoplayer2.ui.PlayerControlView
        android:id="@+id/exo_controller"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:controller_layout_id="@layout/live_play_custom_playercontroller_layout">

    </com.google.android.exoplayer2.ui.PlayerControlView>

id=exo_overlay为视频之上可显示的控件，在空中教研中主要显示自定义的播放视频的各种状态显示。

id=exo_controller为用户控制播放器的控件id.

live_play_custom_playercontroller_layout.xml

    <!--视频播放头部显示-->
    <include layout="@layout/live_play_title_include" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bg_air_teach_play_bottom_control"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingStart="15dp"
        android:paddingEnd="20dp">


        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <!--开始播放按钮-->
            <ImageButton
                android:id="@id/exo_play"
                android:layout_width="28dp"
                android:layout_height="28dp"
                android:layout_gravity="center"
                android:background="@android:color/transparent"
                android:padding="5dp"
                android:src="@drawable/start_live_play" />
			<!--暂停按钮-->
            <ImageButton
                android:id="@id/exo_pause"
                android:layout_width="28dp"
                android:layout_height="28dp"
                android:layout_gravity="center"
                android:background="@android:color/transparent"
                android:padding="5dp"
                android:src="@drawable/stop_live_play" />
        </FrameLayout>

        <!--播放当前时间显示-->
        <TextView
            android:id="@id/tv_current_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:text="00:00"
            android:textColor="@color/white"
            android:textSize="12sp"
            android:textStyle="bold" />

        <!--播放进度条-->
        <com.up366.mobile.live.air.view.CustomTimeBar
            android:id="@id/exo_progress"
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="1"
            app:bar_height="2dp"
            app:bar_corner="1dp"
            app:scrubber_disabled_size="10dp"
            app:scrubber_enabled_size="10dp"
            app:played_color="@color/c1"
            app:unplayed_color="@color/white"
            app:buffered_color="@color/white"/>

        <!--视频时长显示-->
        <TextView
            android:id="@+id/tv_total_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:text="00:00:00"
            android:textColor="@color/white"
            android:textSize="12sp"
            android:textStyle="bold" />

    </LinearLayout>

更过的控件ID可以查看ExoPlayer的源码U模块，PlayerView在创建时解析控件与ids.xml中对控件ID名字的描述

3. 自定义控件显示

ExoPlayer的设计符合依赖倒置与接口隔离原则(依赖与抽象接口不依赖具体实现，以接口分割功能)，所以我们可以很好的进行扩展。

ExoPlayer有提供了UI的默认实现，给我们很好的例子，几乎特殊的UI需求也只需要简单的抄写修改就行。
eg: ExoPlayer的DefaultTimeBar进行简单绘制修改就能满足我们特殊的UI需求。

PlayerView还给我们提供了一系列的控制控制控件显示隐藏的参数和方法。

总结：ExoPlayer提供了上面两种功能就能极大减少我们构建自定义播放界面的工作，使用特别快速。