自定义exoplayer叠加层，就像youtube播放器一样

Creating custom UI elements for ExoPlayer

为ExoPlayer创建自定义UI元素

If you haven’t checked out my first part on ExoPlayer like What is ExoPlayer, Why do we need it and ExoPlayer basic integration please checkout Android ExoPlayer: Play Videos in Your App Like YouTube for better understanding while further reading. Else if you have a basic idea regarding ExoPlayer you can skip that and proceed.

如果您还没有像ExoPlayer什么一样签出我在ExoPlayer上的第一篇文章，为什么我们需要它和ExoPlayer基本集成，请查阅Android ExoPlayer：像YouTube一样在您的应用中播放视频，以便在进一步阅读的同时更好地理解。 否则，如果您对ExoPlayer有基本了解，则可以跳过该步骤并继续。

介绍 (Introduction)

ExoPlayer is the video player running in the Android YouTube app, Netflix, Hotstar, Amazon Prime, etc. For the reasons like it is an open-source project which is maintained by Google that has its perks and it’s totally free most player apps in Android use this ExoPlayer. Also, the other reason is that customizing the default MediaPlayer is very difficult to manage and doesn’t support many formats for flexible use. In my previous article, we discussed the importance and basic usage of ExoPlayer. In this post, we will focus on how to customize the UI of an ExoPlayer as per our requirement. By the end of this article, we should get a similar UI of the Youtube app.

ExoPlayer是在Android YouTube应用，Netflix，Hotstar，Amazon Prime等中运行的视频播放器。由于它是一个开放源代码项目，由Google维护，因此有其特权，而且它是完全免费的，大多数Android播放器应用使用此ExoPlayer。 另外，另一个原因是自定义默认MediaPlayer很难管理，并且不支持多种格式来灵活使用。 在上一篇文章中，我们讨论了ExoPlayer的重要性和基本用法。 在本文中，我们将重点介绍如何根据我们的要求自定义ExoPlayer的UI。 到本文结尾，我们应该获得类似Youtube应用程序的UI。

If you are a code enthusiast and don’t want the theory please check out the code directly at exoplayer_android_sample. The code is on the branch feature/customizing_ui_youtube

如果您是代码狂热者，并且不想学习该理论，请直接在exoplayer_android_sample上检查代码。 该代码位于分支feature/customizing_ui_youtube

如何自定义ExoPlayer的UI？ (How to Customize the UI of ExoPlayer?)

User Interface(UI) plays a key role in the success of any app. As everyone loves to have their own UI elements on the player app than those default ones provided by ExoPlayer, it provides the flexibility to change the UI very easily.

用户界面(UI)在任何应用的成功中都起着关键作用。 由于每个人都喜欢在播放器应用程序上拥有自己的UI元素，而不是ExoPlayer提供的默认元素，因此它提供了非常容易更改UI的灵活性。

The above screen is the output of the basic implementation of ExoPlayer on exoplayer_android_sample which we implemented in the previous article. The UI elements in the above image like Play, Pause, Forward, etc don’t look so good. Let’s check how to customize them

上面的屏幕是在上一篇文章中实现的exoplayer_android_sample上ExoPlayer的基本实现的输出。 上图中的UI元素(如播放，暂停，前进等)看起来不太好。 让我们检查一下如何自定义它们

The best and easiest way that can be used to change the visual appearance is by overriding the layout files and changing the UI elements. We can simply override the controller layout file named exo_playback_control_view.xml from the base and provide our custom elements or we can create a custom layout and provide it as value to app:controller_layout_id . But before heading into it directly let's explore a few attributes of ExoPlayer.

可以用来更改视觉外观的最好，最简单的方法是覆盖布局文件并更改UI元素。 我们可以简单地从基础覆盖名为exo_playback_control_view.xml的控制器布局文件并提供我们的自定义元素，也可以创建一个自定义布局并将其作为值提供给app:controller_layout_id 。 但是在直接进入它之前，让我们探索一下ExoPlayer的一些属性。

自定义ExoPlayer属性 (Customizing ExoPlayer Attributes)

Let’s add a few attributes to our ExoPlayer view in the layout file to customize its behavior. The below is the snippet of few attributes added

让我们在布局文件的ExoPlayer视图中添加一些属性以自定义其行为。 以下是添加的一些属性的摘要

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    tools:context=".MainActivity">


    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/video_player_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:rewind_increment="10000"
        app:fastforward_increment="10000"
        app:auto_show="true"
        app:surface_type="surface_view"
        app:use_controller="true"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

Let’s understand each of them

让我们了解他们每个人

rewind_increment — This was the attribute used to specify the duration of the rewind applied when the user taps the rewind button. The duration is specified in milliseconds. Use zero to disable the rewind button.

rewind_increment —这是用于指定当用户点击快退按钮时应用的快退持续时间的属性。 持续时间以毫秒为单位。 使用零禁用快退按钮。

fastforward_increment — This was the attribute used to specify the duration of the forward applied when the user taps the forward button. The duration is specified in milliseconds. Use zero to disable the forward button.

fastforward_increment —这是用于指定用户点击前进按钮时应用的前进时间的属性。 持续时间以毫秒为单位。 使用零禁用前进按钮。

auto_show — This was the attribute used to specify whether to automatically show the controls when playback starts, pauses, ends or fails. If set to false, the playback controls can be manually operated with showController()<