Exoplayer的详细使用UI篇

本文主要是介绍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.PlayerViewandroid: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

    <FrameLayoutandroid:id="@id/exo_overlay"android:layout_width="match_parent"android:layout_height="match_parent"><com.up366.mobile.live.air.view.AirTeachLiveStateViewandroid:id="@+id/live_state_view"android:layout_width="match_parent"android:layout_height="match_parent"android:visibility="gone"/></FrameLayout><com.google.android.exoplayer2.ui.PlayerControlViewandroid: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" /><LinearLayoutandroid: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"><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"><!--开始播放按钮--><ImageButtonandroid: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" /><!--暂停按钮--><ImageButtonandroid: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><!--播放当前时间显示--><TextViewandroid: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.CustomTimeBarandroid: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"/><!--视频时长显示--><TextViewandroid: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提供了上面两种功能就能极大减少我们构建自定义播放界面的工作，使用特别快速。

这篇关于Exoplayer的详细使用UI篇的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---