Android Media3（四）— 在RecyclerView中使用Media3

ChenYhong2023-09-24 16:48

最近在开发新App的过程中遇到了个需求，需要在RecyclerView中播放视频。本文介绍如何在RecyclerView中使用Media3播放视频。

添加依赖

在app module下的build.gradle中添加代码，如下:

scss 复制代码 
dependencies {
    implementation("androidx.media3:media3-ui:1.1.0")
    implementation("androidx.media3:media3-session:1.1.0")
    implementation("androidx.media3:media3-exoplayer:1.1.0")
}

在RecyclerView中使用Media3播放视频

设置ExoPlayer

RecyclerView有复用机制，可以在ViewHolder中配置ExoPlayer和通用参数，减少ExoPlayer实体的数量，代码如下：

  • Adapater 代码
kotlin 复制代码 
class Media3ListExampleAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    private val containerData = ArrayList<ExampleListEntity>()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        // 通过viewType判断该使用什么布局，1为视频item，2为普通item
        return if (viewType == 1) {
            VideoItemViewHolder(LayoutMedia3ListVideoItemBinding.inflate(LayoutInflater.from(parent.context), parent, false))
        } else {
            NormalItemViewHolder(LayoutMedia3ListNormalItemBinding.inflate(LayoutInflater.from(parent.context), parent, false))
        }
    }

    override fun getItemCount(): Int {
        return containerData.size
    }

    override fun getItemViewType(position: Int): Int {
        return containerData[position].type
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        // 设置item项的点击事件
        holder.itemView.setOnClickListener {
            itemClickCallback?.onItemClick(containerData[position])
        }
        when (holder) {
            is VideoItemViewHolder -> {
                containerData[position].run {
                    // 加载第一帧作为封面
                    Glide.with(holder.itemView.context)
                        .setDefaultRequestOptions(RequestOptions()
                            .frame(1)
                            .centerCrop())
                        .load(videoUrl)
                        .into(holder.itemViewBinding.ivVideoCover)

                    holder.itemViewBinding.playerView.player?.run {
                        // 设置播放链接
                        videoUrl?.let { newUrl -> setMediaItem(MediaItem.fromUri(newUrl))}
                        playWhenReady = true
                        prepare()
                    }
                }
            }

            is NormalItemViewHolder -> holder.itemViewBinding.tvTextContent.text = "${containerData[position].itemText ?: "Normal item"} $position"
        }
    }

    fun setNewData(newData: ArrayList<ExampleListEntity>?) {
        val currentItemCount = itemCount
        if (currentItemCount != 0) {
            containerData.clear()
            notifyItemRangeRemoved(0, currentItemCount)
        }
        if (!newData.isNullOrEmpty()) {
            containerData.addAll(newData)
            notifyItemRangeChanged(0, itemCount)
        }
    }

    class VideoItemViewHolder(val itemViewBinding: LayoutMedia3ListVideoItemBinding) : RecyclerView.ViewHolder(itemViewBinding.root) {
        private val exoPlayer: ExoPlayer = ExoPlayer.Builder(itemView.context).apply {
            CacheController.getMediaSourceFactory()?.let { setMediaSourceFactory(it) }
        }.build()

        private val videoListener = object : Player.Listener {
            override fun onIsPlayingChanged(isPlaying: Boolean) {
                super.onIsPlayingChanged(isPlaying)
                if (isPlaying) {
                    // 开始播放时隐藏封面图
                    itemViewBinding.ivVideoCover.visibility = View.GONE
                }
            }
        }

        init {
            // 配置ExoPlayer到PlayerView
            itemViewBinding.playerView.player = exoPlayer
            itemViewBinding.playerView.player?.run {
                removeListener(videoListener)
                addListener(videoListener)
                repeatMode = Player.REPEAT_MODE_ALL
            }
        }
    }

    class NormalItemViewHolder(val itemViewBinding: LayoutMedia3ListNormalItemBinding) : RecyclerView.ViewHolder(itemViewBinding.root)
}
  • 示例页面代码
kotlin 复制代码 
class Media3ListExampleActivity : BaseGestureDetectorActivity<LayoutMeida3ListExampleAcitivityBinding>() {

    private val media3ListExampleAdapter = Media3ListExampleAdapter()

    override fun initViewBinding(layoutInflater: LayoutInflater): LayoutMeida3ListExampleAcitivityBinding {
        return LayoutMeida3ListExampleAcitivityBinding.inflate(layoutInflater)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding.rvMedia3ListContainer.adapter = media3ListExampleAdapter
        media3ListExampleAdapter.itemClickCallback = object : Media3ListExampleAdapter.ItemClickCallback {
            override fun onItemClick(data: ExampleListEntity) {
                // 打开一个半透明的Activity
                startActivity(Intent(this@Media3ListExampleActivity, TransparentActivity::class.java))
            }
        }
        media3ListExampleAdapter.setNewData(arrayListOf(
            ExampleListEntity(1, "https://minigame.vip/Uploads/images/2021/09/18/1631951892_page_img.mp4", "Video item"), 
            ExampleListEntity(2, "", "Normal item"),
            ExampleListEntity(2, "", "Normal item"), 
            ExampleListEntity(2, "", "Normal item"),
            ExampleListEntity(2, "", "Normal item"), 
            ExampleListEntity(2, "", "Normal item"),
            ExampleListEntity(2, "", "Normal item"), 
            ExampleListEntity(2, "", "Normal item"),
            ExampleListEntity(1, "https://storage.googleapis.com/exoplayer-test-media-1/mp4/dizzy-with-tx3g.mp4", "Video item"),
            ExampleListEntity(2, "", "Normal item"),
            ExampleListEntity(2, "", "Normal item")))
    }
}

效果如图：

在效果图中可以看到，上面的代码可以简单实现在RecyclerView中播放视频，但是存在如下问题：

  1. 当 item 已经滑出屏幕后视频不会暂停播放（图中无法体现，可以自行通过代码验证一下）。
  2. 当打开新页面时视频不会暂停播放。

暂停和继续播放

不会暂停播放的原因显而易见，在上面的代码中并没有主动调用暂停播放。那么针对上面两点问题，什么时候调用暂停播放比较合适呢？

  1. 当 Item 滑出屏幕时，Adapater中的onViewDetachedFromWindow方法会被回调，可以在此调用暂停方法。
  2. Adapter无法像Activity一样感知生命周期，因此需要对外曝露刷新方法，然后在Activity的onResume和onPause方法中调用刷新方法，改变视频的状态。

改动代码如下：

  • Adapater 代码
kotlin 复制代码 
class Media3ListExampleAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    .....
    
    private var pauseVideo = false

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        ......
        
        when (holder) {
            is VideoItemViewHolder -> {
                containerData[position].run {
                    ......

                    holder.itemViewBinding.playerView.player?.run {
                        if (pauseVideo) {
                            // 暂停播放
                            holder.pauseVideo()
                        } else {
                            // 开始播放
                            videoUrl?.let { newUrl -> setMediaItem(MediaItem.fromUri(newUrl))}
                            playWhenReady = true
                            prepare()
                        }
                    }
                }
            }

            is NormalItemViewHolder -> holder.itemViewBinding.tvTextContent.text = "${containerData[position].itemText ?: "Normal item"} $position"
        }
    }

    override fun onViewDetachedFromWindow(holder: RecyclerView.ViewHolder) {
        super.onViewDetachedFromWindow(holder)
        if (holder is VideoItemViewHolder) {
            // 当View从Window中被移除时暂停播放视频
            holder.pauseVideo()
        }
    }

    fun notifyVideoItemStatus(pauseVideo: Boolean) {
        // 设置是否暂停播放，更新视频 item
        this.pauseVideo = pauseVideo
        containerData.forEach {
            if (it.type == 1) {
                notifyItemChanged(containerData.indexOf(it))
            }
        }
    }

    class VideoItemViewHolder(val itemViewBinding: LayoutMedia3ListVideoItemBinding) : RecyclerView.ViewHolder(itemViewBinding.root) {
        ......
        
        fun pauseVideo() {
            // 暂停播放视频
            itemViewBinding.playerView.onPause()
            exoPlayer.pause()
        }
    }
    
    ......
}
  • 示例页面代码
kotlin 复制代码 
class Media3ListExampleActivity : BaseGestureDetectorActivity<LayoutMeida3ListExampleAcitivityBinding>() {
    
    ......
    
    override fun onPause() {
        super.onPause()
        media3ListExampleAdapter.notifyVideoItemStatus(true)
    }

    override fun onResume() {
        super.onResume()
        media3ListExampleAdapter.notifyVideoItemStatus(false)
    }
}

效果如图：

现在可以在需要暂停时暂停，需要播放时播放了，满足了基本的使用。但是还有一个问题：暂停后继续播放时视频从头开始播放了，这个体验不太好，可以优化一下。

记录播放进度

当 item 被移出屏幕再移回时、主动调用刷新方法时，Adapater的onBindViewHolder方法都会执行，所以其实每次都是设置新的播放链接，然后从头开始播放。Media3的setMediaItem方法可以传入开始播放的位置，所以只要在暂停时记录一下当前视频播放的进度，然后在调用setMediaItem时传入即可。

改动代码如下：

kotlin 复制代码 
class Media3ListExampleAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    ......

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        ......
        
        when (holder) {
            is VideoItemViewHolder -> {
                containerData[position].run {
                    ......

                    holder.itemViewBinding.playerView.player?.run {
                        if (pauseVideo) {
                            // 暂停播放
                            holder.pauseVideo()
                        } else {
                            // 开始播放
                            videoUrl?.let { newUrl ->
                                // 使用播放链接获取缓存的播放进度，没有的话从0开始播放
                                setMediaItem(MediaItem.fromUri(newUrl), holder.mediaProgress[newUrl] ?: 0L)
                            }
                            playWhenReady = true
                            prepare()
                        }
                    }
                }
            }

            is NormalItemViewHolder -> holder.itemViewBinding.tvTextContent.text = "${containerData[position].itemText ?: "Normal item"} $position"
        }
    }
    
    ......

    class VideoItemViewHolder(val itemViewBinding: LayoutMedia3ListVideoItemBinding) : RecyclerView.ViewHolder(itemViewBinding.root) {
    
        ......

        val mediaProgress = ConcurrentHashMap<String, Long>()

        private val videoListener = object : Player.Listener {
            override fun onIsPlayingChanged(isPlaying: Boolean) {
                super.onIsPlayingChanged(isPlaying)
                if (isPlaying) {
                    // 开始播放时隐藏封面图
                    itemViewBinding.ivVideoCover.visibility = View.GONE
                } else {
                    itemViewBinding.playerView.player?.run {
                        // 暂停时根据视频链接记录播放的进度
                        currentMediaItem?.localConfiguration?.uri?.toString()?.let { uri -> mediaProgress[uri] = currentPosition }
                    }
                }
            }
        }

        ......
    }
    
    ......
}

效果如图：

示例

演示代码已在示例Demo中添加。

ExampleDemo github

ExampleDemo gitee

相关推荐
Dingdangr3 小时前
Android中的Intent的作用
android
技术无疆3 小时前
快速开发与维护：探索 AndroidAnnotations
android·java·android studio·android-studio·androidx·代码注入
GEEKVIP3 小时前
Android 恢复挑战和解决方案：如何从 Android 设备恢复删除的文件
android·笔记·安全·macos·智能手机·电脑·笔记本电脑
Jouzzy10 小时前
【Android安全】Ubuntu 16.04安装GDB和GEF
android·ubuntu·gdb
极客先躯11 小时前
java和kotlin 可以同时运行吗
android·java·开发语言·kotlin·同时运行
Good_tea_h13 小时前
Android中的单例模式
android·单例模式
计算机源码社18 小时前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp（源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
丶白泽19 小时前
重修设计模式-结构型-门面模式
android
晨春计20 小时前
【git】
android·linux·git
标标大人21 小时前
c语言中的局部跳转以及全局跳转
android·c语言·开发语言
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习