AndroidX Media3之ExoPlayer简单使用(2)

在上一篇文章AndroidX Media3之ExoPlayer简单使用(1)中介绍了ExoPlayer的简单使用，运用了media3-ui包中提供的关于ExoPlayer的UI组件和资源。但是在日常开发中，播放器的界面会被要求为各式各样的，没有办法使用media3-ui包中提供的通用界面。
在这篇文章将介绍如何自己实现一个简单的PlayerView。

demo下载

看一下最终的效果界面图：

依赖项

在上一篇文章的依赖项基础上，可以去除media3-ui的依赖，只需要一个androidx.media3:media3-exoplayer:1.0.0-beta02依赖即可。

基本要素

通过查看media3-ui库中的PlayerView实现，可以看到自定义播放界面需要的一些基本要素：

  private final ComponentListener componentListener;
  @Nullable private final AspectRatioFrameLayout contentFrame;
  @Nullable private final View shutterView;
  @Nullable private final View surfaceView;
  private final boolean surfaceViewIgnoresVideoAspectRatio;
  @Nullable private final ImageView artworkView;
  @Nullable private final SubtitleView subtitleView;
  @Nullable private final View bufferingView;
  @Nullable private final TextView errorMessageView;
  @Nullable private final PlayerControlView controller;
1
2
3
4
5
6
7
8
9
10

componentListener：用于播放事件的监听，包括有播放状态、播放异常情况等。
contentFrame：播放界面的宽高比例大小等。
surfaceView：用于渲染视频的Surface。
bufferingView：视频缓冲时显示。
errorMessageView：视频播放异常时显示。
controller：视频播放控制界面，包括播放暂停操作、播放进度操作等。

播放事件的监听

通过player.addListener添加一个Player.Listener进行播放事件的监听。Player.Listener有空的默认方法，因此按需实现所需要的方法即可。
我们所需要实现的方法主要有以下几个：

• onVideoSizeChanged：获取播放视频的宽度和高度，用于更新播放界面的宽高比例大小
• onPlayerError：播放异常情况的监听，用于展示错误界面
• onPlaybackStateChanged：播放状态的监听，用于视频缓冲界面展示、视频播放控制界面
• onPlayWhenReadyChanged：播放暂停操作的监听，用于视频播放控制界面

    private inner class ComponentListener : Player.Listener {

        override fun onVideoSizeChanged(videoSize: VideoSize) {
            updateAspectRatio()
        }

        override fun onPlayerError(error: PlaybackException) {
            updateErrorMessage()
        }

        override fun onPlaybackStateChanged(playbackState: @State Int) {
            if (playbackState == Player.STATE_READY && visibility != View.VISIBLE) {
                visibility = View.VISIBLE
            }
            updateProgressState()
        }

        override fun onPlayWhenReadyChanged(
            playWhenReady: Boolean, reason: @Player.PlayWhenReadyChangeReason Int
        ) {
            //播放暂停会回调该方法，播放时playWhenReady为true
            updateProgressState()
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

播放界面的显示

media3-ui库中的PlayerView对于视频播放界面的显示用了AspectRatioFrameLayout，我们可以直接复用这个布局，也可以自己简单的实现一个。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:id="@+id/exo_content_frame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/exo_error_message"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@color/white"
        android:visibility="gone"
        android:text="刷新"
        app:layout_constraintBottom_toBottomOf="@id/exo_content_frame"
        app:layout_constraintEnd_toEndOf="@id/exo_content_frame"
        app:layout_constraintStart_toStartOf="@id/exo_content_frame"
        app:layout_constraintTop_toTopOf="@id/exo_content_frame" />
</androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

使用ConstraintLayout作为一个根布局，利用constraintDimensionRatio属性可以设置播放界面的宽高比例显示。当拿到视频的宽度和高度之后，将播放界面的宽高比例更改为视频自身的宽高比。

    private fun updateAspectRatio() {
        player?.videoSize?.let { videoSize ->
            if (videoSize.width > 0 && videoSize.height > 0) {
                val width = videoSize.width
                val height = videoSize.height
                //更改比例，根据视频自身宽高比展示
                (binding.exoContentFrame.layoutParams as? LayoutParams)?.let {
                    it.dimensionRatio = "$width:$height"
                    binding.exoContentFrame.layoutParams = it
                }
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

什么时候可以拿到视频的宽度和高度呢？在上一篇文章中，通过player.addListener添加一个Player.Listener进行播放事件的监听，可以监听到播放状态、播放异常情况等，此外还有onVideoSizeChanged方法可以获取到视频的宽度和高度，在该方法中更新播放界面的宽高比例即可。

用于渲染视频的Surface

我们需要一个SurfaceView用于渲染视频：

• 创建一个SurfaceView：

private val surfaceView by lazy { SurfaceView(context) }
1

• 将SurfaceView添加到布局上:

binding.exoContentFrame.addView(surfaceView, 0)
1

• 渲染视频：

player.setVideoSurfaceView(surfaceView)
1

视频缓冲时显示

视频的播放会需要缓冲时间，在上一篇文章中有介绍到播放监听onPlaybackStateChanged方法中会有视频播放的四种播放状态：

• STATE_IDLE:初始状态，此时播放器没有可以播放的资源，播放器停止播放或者播放失败后也会处于该状态
• STATE_BUFFERING: 没有足够的数据可以加载播放，此时无法立即播放
• STATE_READY : 播放器可以立即播放，是否播放取决于playWhenReady的值，该值表达了使用者的意愿，为true，将会开始播放，否则不播。
• STATE_ENDED: 播放完了所有的资源后处于该状态

在监听到STATE_READY状态为止之前就是视频的缓冲时间，进行一个缓冲状态的展示，例如loading，监听到STATE_READY状态之后，隐藏缓冲状态loading，展示视频播放。

视频播放异常时显示

在播放监听onPlayerError方法中可以监听到播放异常情况，此时需要展示播放异常界面，展示错误信息和重新加载界面，当需要重新加载时调用player.prepare()方法。

视频播放控制界面

视频播放控制界面，包括播放暂停操作、播放进度操作等跟用户进行互动的操作。

播放暂停操作

根据播放器当前状态来进行播放或者暂停的操作，同时更新操作界面展示。

        binding.tvPlay.setOnClickListener {
            if (player.isPlaying) {
                player.pause()
                binding.tvPlay.text = "播放"
            } else {
                player.play()
                binding.tvPlay.text = "暂停"
            }
        }
1
2
3
4
5
6
7
8
9

播放进度操作

播放进度是一个需要不断自动更新的状态，在播放监听中onPlaybackStateChanged方法和onPlayWhenReadyChanged方法中我们都需要调用更新播放进度的方法。onPlaybackStateChanged是加载播放视频到加载完成播放会回调该方法，onPlayWhenReadyChanged是视频播放或者暂停操作会回调该方法。

    private inner class ComponentListener : Player.Listener {

        override fun onVideoSizeChanged(videoSize: VideoSize) {
            updateAspectRatio()
        }

        override fun onPlayerError(error: PlaybackException) {
            updateErrorMessage()
        }

        override fun onPlaybackStateChanged(playbackState: @State Int) {
            if (playbackState == Player.STATE_READY && visibility != View.VISIBLE) {
                visibility = View.VISIBLE
            }
            updateProgressState()
        }

        override fun onPlayWhenReadyChanged(
            playWhenReady: Boolean, reason: @Player.PlayWhenReadyChangeReason Int
        ) {
            //播放暂停会回调该方法，播放时playWhenReady为true
            updateProgressState()
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在更新播放进度方法中，我们通过handler不断的发消息来进行进度的更新。当视频不是播放状态时自然也是不需要更新播放进度的。

    /**
     * 更新进度条状态
     */
    private fun updateProgressState() {
        if (player?.playbackState == Player.STATE_READY && (player?.isPlaying == true)) {
            progressHandler.removeCallbacksAndMessages(null)
            progressHandler.sendEmptyMessage(1)
        } else {
            //清空进度
            progressHandler.removeCallbacksAndMessages(null)
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

通过播放器相关方法可以获取到视频总时长、当前加载时长和当前播放时长，进而进行播放进度的更新和展示。

    private val progressHandler = object : Handler(Looper.myLooper()!!) {
        override fun handleMessage(msg: Message) {
            val currentPlayer = player
            //获取进度并通知
            if (currentPlayer != null && currentPlayer.playbackState == Player.STATE_READY && currentPlayer.isPlaying) {
                val currentPosition = currentPlayer.currentPosition.toInt()
                val bufferedPosition = currentPlayer.bufferedPosition.toInt()
                val duration = currentPlayer.duration.toInt()
                progressChangeList.forEach {
                    it.onProgressChanged(currentPosition, bufferedPosition, duration)
                }
                //0.5秒后自动获取进度
                sendEmptyMessageDelayed(1, 500)
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果播放进度条可以进行拖拽从而达到操作播放进度，只要使用player.seekTo()方法就可以指定播放器播放进度。

资源释放

当不再需要播放器时，记得释放资源，由于使用了handler发消息来进行播放进度的更新，所以也需要对handler进行资源释放：

    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        //释放资源
        try {
            player?.setVideoSurfaceView(null)
            player?.stop()
            player?.release()
            player?.removeListener(componentListener)
            progressHandler.removeCallbacksAndMessages(null)
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

前后台切换播放优化

如果不采取任何操作，在进行后台切至前台的操作时，会出现黑屏的情况，因此当切至后台时，对播放状态进行一个保存，并暂停播放器，当切回前台时，恢复播放器之前的播放状态，可以在onWindowVisibilityChanged方法中进行该优化操作：

    override fun onWindowVisibilityChanged(visibility: Int) {
        super.onWindowVisibilityChanged(visibility)
        if (visibility == View.VISIBLE) {
            if (playState) {
                player?.play()
            }
        } else {
            playState = (player?.isPlaying == true)
            if (player?.isPlaying == true) {
                player?.pause()
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13