如何在回收站视图中处理 exo 播放器？

Question

我们如何在回收站视图中使用多个 exo 播放器？我看到很多帖子和视频，例如 this and this，但它们都使用自定义回收器视图 class。我可以继续这样做。但是，我想制作一个完整的 Insta 克隆，我可以在其中发送 gif、图像和视频。现在，当我使用自定义回收器视图 class 时，我不知道如何播放带有 gif 和图像的视频。这是我的回收站查看项目代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="10dp"
    app:cardCornerRadius="6dp"
    app:cardElevation="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="10dp">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <com.sambhav2358.facebookclone.customviews.RoundedImageView
                android:id="@+id/senderImage"
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:cornerRadius="100dp"
                android:src="@color/primary"/>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical"
                android:layout_marginStart="10dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/senderName"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:text="Sender name"
                        android:ellipsize="end"
                        android:textStyle="bold"
                        android:textColor="@color/black"
                        android:layout_weight="1"/>

                    <TextView
                        android:id="@+id/dateAdded"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Date added"
                        android:ellipsize="end"
                        android:layout_marginStart="10dp"/>

                </LinearLayout>

                <TextView
                    android:id="@+id/senderUserName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Sender user name"
                    android:ellipsize="end"
                    android:textColor="@color/black"
                    android:layout_weight="1"/>

            </LinearLayout>

            <ImageView
                android:id="@+id/more"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/more"
                android:layout_marginStart="5dp"
                android:padding="4dp"
                android:background="?selectableItemBackgroundBorderless"/>

        </LinearLayout>

        <TextView
            android:id="@+id/body"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Body\nOf\nThe\nPost"
            android:layout_margin="10dp"/>

        <androidx.cardview.widget.CardView
            android:id="@+id/postExtra"
            android:layout_width="fill_parent"
            android:layout_height="200dp"
            android:layout_margin="5dp"
            app:cardCornerRadius="6dp"
            app:cardElevation="0dp">

            <com.google.android.exoplayer2.ui.PlayerView
                android:id="@+id/videoView"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <ImageView
                android:id="@+id/imageVIew"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <com.giphy.sdk.ui.views.GifView
                android:id="@+id/gifView"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

        </androidx.cardview.widget.CardView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:cardCornerRadius="50dp"
                android:backgroundTint="@color/primary">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:paddingHorizontal="10dp"
                    android:paddingVertical="5dp"
                    android:gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/like"
                        app:tint="@android:color/white" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Like"
                        android:textColor="@color/white"
                        android:layout_gravity="center"
                        android:layout_marginStart="10dp"/>

                </LinearLayout>

            </androidx.cardview.widget.CardView>

            <View
                android:layout_width="10dp"
                android:layout_height="0dp"/>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:cardCornerRadius="50dp"
                android:backgroundTint="@color/primary">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:paddingHorizontal="10dp"
                    android:paddingVertical="5dp"
                    android:gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/share"
                        app:tint="@color/white" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Share"
                        android:textColor="@color/white"
                        android:layout_gravity="center"
                        android:layout_marginStart="10dp"/>

                </LinearLayout>

            </androidx.cardview.widget.CardView>

            <View
                android:layout_width="10dp"
                android:layout_height="0dp" />

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:cardCornerRadius="50dp"
                android:backgroundTint="@color/primary">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:paddingHorizontal="10dp"
                    android:paddingVertical="5dp"
                    android:gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/comment"
                        app:tint="@android:color/white" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Comment"
                        android:textColor="@color/white"
                        android:layout_gravity="center_vertical"
                        android:layout_marginStart="10dp"/>

                </LinearLayout>

            </androidx.cardview.widget.CardView>
        </LinearLayout>


    </LinearLayout>

</androidx.cardview.widget.CardView>

Answer 1

我明白了。我知道了。 我明白了。我刚刚制作了一个 class，其中我创建了一个 ExoPlayer class 的静态 var?，它看起来像这样：

import android.annotation.SuppressLint
import com.google.android.exoplayer2.ExoPlayer

@SuppressLint("StaticFieldLeak", "Deprecation")
class ExoPlayerPlaybackHelper {
    companion object{
        var playerView : ExoPlayer? = null
    }
}

然后，我在我的模型 (data class) 中使用它来创建一个 ExoPlayer 的对象，其中包含一个播放函数，最后，我的模型看起来像这个：

import com.google.android.exoplayer2.ExoPlayer
import com.sambhav2358.facebookclone.utils.ExoPlayerPlaybackHelper

data class Post(my params, var playerView: ExoPlayer?){
    fun playVideo(playerView : ExoPlayer) {
        ExoPlayerPlaybackHelper.playerView?.pause()

        ExoPlayerPlaybackHelper.playerView = playerView

        playerView.play()
    }

    constructor() : this(my params, null)
}

现在，在适配器中，我将我的 exo 播放器传递给我的数据 class 的对象，如下所示：

post.playerView = binding.videoView.player as ExoPlayer

最后一个任务是使用 OnScrollListener 根据滚动位置停止和播放视频。我使用了这段代码，它为我完成了任务：

binding.recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {

                val pos = (recyclerView.layoutManager as? LinearLayoutManager)?.findLastCompletelyVisibleItemPosition()

                if (pos == -1) return

                Log.d(TAG, "onScrolled: Scrolled $pos")

                if (posts[pos!!].messageType == "video" || posts[pos].messageType == "messageVideo") { // you might remove this line If you only use video players. But, I needed it.
                    posts[pos].playVideo(posts[pos].playerView!!)
                    Log.d(TAG, "onScrolled: played")
                }


                Log.d(TAG, "onScrolled: startCheckPauseTask")
                for (position in posts.indices){
                    if (position == pos) continue

                    posts[position].playerView?.pause()
                    posts[position].playerView?.seekTo(0)
                }
                Log.d(TAG, "onScrolled: finishCheckPauseTask")

            }
        })

结果

您可以从here

查看结果

如何在回收站视图中处理 exo 播放器？

How to handle exo players in recycler view?

android

kotlin

exoplayer

android-recyclerview

exoplayer2.x

结果