AndroidX Media3之ExoPlayer简单使用(2)

AndroidX Media3之ExoPlayer简单使用(2)在上一篇文章AndroidX Media3之ExoPlayer简单使用(1)中介绍了ExoPlayer的简单使用,在这篇文章将介绍如何自己实现一个简单的PlayerView

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

在这篇文章将介绍如何自己实现一个简单的PlayerView。

demo下载

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

image.png

依赖项

在上一篇文章的依赖项基础上,可以去除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;

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()
        }
    }

播放界面的显示

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>

使用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
                }
            }
        }
    }

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

用于渲染视频的Surface

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

  • 创建一个SurfaceView:
private val surfaceView by lazy { SurfaceView(context) }
  • 将SurfaceView添加到布局上:
binding.exoContentFrame.addView(surfaceView, 0)
  • 渲染视频:
player.setVideoSurfaceView(surfaceView)

视频缓冲时显示

视频的播放会需要缓冲时间,在上一篇文章中有介绍到播放监听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 = "暂停"
            }
        }

播放进度操作

播放进度是一个需要不断自动更新的状态,在播放监听中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()
        }
    }

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

    /** * 更新进度条状态 */
    private fun updateProgressState() {
        if (player?.playbackState == Player.STATE_READY && (player?.isPlaying == true)) {
            progressHandler.removeCallbacksAndMessages(null)
            progressHandler.sendEmptyMessage(1)
        } else {
            //清空进度
            progressHandler.removeCallbacksAndMessages(null)
        }
    }

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

    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)
            }
        }
    }

如果播放进度条可以进行拖拽从而达到操作播放进度,只要使用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()
        }
    }

前后台切换播放优化

如果不采取任何操作,在进行后台切至前台的操作时,会出现黑屏的情况,因此当切至后台时,对播放状态进行一个保存,并暂停播放器,当切回前台时,恢复播放器之前的播放状态,可以在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()
            }
        }
    }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22741.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注