pausing video shows black screen instead of video frame

[rahul-sysquare]

Hi all,

I'm using framelayout to show/render videos in my recyclerview. The issue is when I pause the video I'm getting a black screen over the video instead of video frame itself. Anyone knows any fix?

Here is the code

kohii.setUp(media.getMediaUrl()) {
                    tag = "video::$position"
                    threshold = 0.5F
                    preload = true
                    repeatMode = Player.REPEAT_MODE_ONE
                    controller = object : Playback.Controller {
                        override fun kohiiCanStart(): Boolean = true
                        override fun kohiiCanPause(): Boolean = true
                        override fun setupRenderer(playback: Playback, renderer: Any?) {
                            binding.playerContainer.setOnClickListener {
                                binding.playIcon.visibility = View.VISIBLE
                                Handler().postDelayed({
                                    binding.playIcon.visibility = View.GONE
                                    //doSomethingHere()
                                }, 1000)
                                val playable = playback.playable ?: return@setOnClickListener
                                
                                if (playable.isPlaying()) {
                                    Log.d("Paying1111", "pause"+holder.binding.container.isVisible)
                                    playback.manager.pause(playable)
                                    binding.playIcon.setImageResource(R.mipmap.video_play_icon)
                                } else {
                                    binding.playIcon.setImageResource(R.mipmap.timeline)
                                    Log.d("Paying1111", "play"+holder.binding.container.isVisible)
                                    playback.manager.play(playable)
                                }
                            }
                            val volume = holder.binding.muteButton as ImageButton
                            volume.isSelected = playback.volumeInfo.mute
                            volume.setOnClickListener {
                                volume.isSelected = !playback.volumeInfo.mute
                                kohii.applyVolumeInfo(
                                    VolumeInfo(mute = !playback.volumeInfo.mute),
                                    playback.manager,
                                    Scope.GLOBAL
                                )
                            }
                            val fullScreen = holder.binding.fullScreen as ImageButton
                            fullScreen.setOnClickListener {
                                val intent = Intent(mContext, VideoPlayerActivity::class.java)
                                val bundle = Bundle().apply {
                                    putParcelable(Constants.URL, media.uri)
                                    putLong("playbackPosition", /*playback.manager?.currentPosition ?: 0*/
                                        0L
                                    )
                                    putInt("currentWindow", position ?: 0)
                                }
                                intent.putExtra(Constants.DATA, bundle)
                                intent.putExtra(Constants.MODEL, media)
                                intent.putExtra(Constants.POST_ID, postModel.postId)
                                intent.putExtra("itemPosition", position)
                            }

                        }

                    }
                }.bind(binding.container);

Here is the XML file code

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="avm"
            type="com.buddynation.dronenation.view.newsfeed.modal.VideoPostViewModal" />

        <import type="android.view.View" />
    </data>

    <FrameLayout
        android:id="@+id/parent_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:orientation="vertical">

            <include
                layout="@layout/post_item_header"
                app:avm="@{avm}" />

            <com.buddynation.dronenation.view.custom.TextViewRegular
                android:id="@+id/postText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/post_margin_left"
                android:layout_marginRight="@dimen/post_margin_left"
                android:layout_marginBottom="10dp"
                android:paddingLeft="2dp"
                android:textColor="@color/white"
                android:textSize="@dimen/post_title_text_size" />

           
            <com.google.android.exoplayer2.ui.AspectRatioFrameLayout
                android:id="@+id/playerContainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="4dp"
                android:clickable="true"
                android:focusable="true"
                android:minHeight="240dp"
                app:resize_mode="fixed_width">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/postImage"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:paddingTop="4dp"
                        android:paddingBottom="4dp"
                        app:loadMediaPhoto="@{avm.mediaPhoto}" />

                    <FrameLayout
                        android:id="@+id/container"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        app:setVideoViewHeight="@{avm.mediaPhoto}" />

                    <androidx.appcompat.widget.AppCompatImageView
                        android:id="@+id/playIcon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:adjustViewBounds="true"
                        android:gravity="center"
                        android:src="@mipmap/video_play_icon"
                        android:tint="@color/white"
                        android:visibility="gone"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent" />

                    <ProgressBar
                        android:id="@+id/indeterminateBar"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:indeterminateTint="@color/yello"
                        android:visibility="gone" />
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="end">

                    <ImageButton
                        android:id="@+id/muteButton"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:backgroundTint="@color/transparent"
                        android:padding="4dp"
                        android:src="@drawable/mute_unmute" />

                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="bottom|end">

                    <ImageButton
                        android:id="@+id/fullScreen"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:padding="4dp"
                        android:backgroundTint="@color/white"
                        android:src="@drawable/fullscreen_no_white" />

                </RelativeLayout>

            </com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

            <include
                layout="@layout/post_item_footer"
                app:avm="@{avm}" />

            <include
                android:id="@+id/lastMessage"
                layout="@layout/post_item_last_comment"
                app:avm="@{avm}" />

            <include
                layout="@layout/post_item_write_comment"
                app:avm="@{avm}" />
        </LinearLayout>
    </FrameLayout>
</layout>

Here are the screenshots

[eneim]

@rahul-sysquare Instead of using com.google.android.exoplayer2.ui.AspectRatioFrameLayout, try the PlayerView.

[rahul-sysquare]

@rahul-sysquare Instead of using com.google.android.exoplayer2.ui.AspectRatioFrameLayout, try the PlayerView.

Ok I'll try that. Is there any possibility with FrameLayout to make a working news feed with Play/Pause, artwork, seek bar and some custom buttons on top of video like full screen or mute button? is there any sample code already available in your repo?

[rahul-sysquare]

This is my updated XML layout for player using player view but it shows black screen when I hide artwork. Any fix for that?

Updated XML Layout

<FrameLayout
        android:id="@+id/parent_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:orientation="vertical">

            <include
                layout="@layout/post_item_header"
                app:avm="@{avm}" />

            <com.buddynation.dronenation.view.custom.TextViewRegular
                android:id="@+id/postText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/post_margin_left"
                android:layout_marginRight="@dimen/post_margin_left"
                android:layout_marginBottom="10dp"
                android:paddingLeft="2dp"
                android:textColor="@color/white"
                android:textSize="@dimen/post_title_text_size" />

            <com.google.android.exoplayer2.ui.AspectRatioFrameLayout
                android:id="@+id/playerContainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:focusable="true"
                android:minHeight="240dp"
                app:resize_mode="fill">

                <com.google.android.exoplayer2.ui.PlayerView
                    android:id="@+id/playerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@android:color/black"
                    app:surface_type="texture_view"
                    android:backgroundTint="@android:color/black"
                    app:shutter_background_color="@android:color/black"
                    app:controller_layout_id="@layout/exo_playback_control_view"
                    app:player_layout_id="@layout/expo_player_view"
                    app:show_buffering="always"
                    app:setVideoViewHeight="@{avm.mediaPhoto}"/>

                <RelativeLayout
                    android:id="@+id/postImageWrapper"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/postImage"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        app:loadMediaPhoto="@{avm.mediaPhoto}" />

                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageButton
                        android:id="@+id/muteButton"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:scaleType="centerInside"
                        android:adjustViewBounds="true"
                        android:backgroundTint="@color/transparent"
                        android:padding="4dp"
                        android:src="@drawable/mute_unmute" />
                    <com.buddynation.dronenation.view.custom.TextViewRegular
                        android:layout_marginTop="5dp"
                        android:layout_marginRight="5dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:visibility="@{avm.moreTextVisiblity}"
                        android:background="@drawable/see_more_bg"
                        android:padding="4dp"
                        android:textColor="@color/white"
                        android:onClick="@{avm.onPlusMoreClick ()}"
                        android:text="@{avm.mediaPhotoCount}"/>

                </RelativeLayout>


                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/playIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:adjustViewBounds="true"
                    android:src="@mipmap/video_play_icon"
                    android:tint="@color/white"
                    android:visibility="gone" />

                <ProgressBar
                    android:id="@+id/indeterminateBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_gravity="center"
                    android:indeterminateTint="@color/yello"
                    android:visibility="gone" />

            </com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

            <include
                layout="@layout/post_item_footer"
                app:avm="@{avm}" />

            <include
                android:id="@+id/lastMessage"
                layout="@layout/post_item_last_comment"
                app:avm="@{avm}" />

            <include
                layout="@layout/post_item_write_comment"
                app:avm="@{avm}" />
        </LinearLayout>
    </FrameLayout>

[rahul-sysquare]

@eneim any hint for the above one?

[eneim]

There are many reasons a renderer shows black screen:

• It is not a PlayerView so the PlayerView is added only when it plays a Video. (default Kohii logic).
• It is a PlayerView and it pauses at a black frame. (content specific).
• It is a PlayerView and you didn't set "keep the buffer when it pauses" (ExoPlayer API, I cannot help if you don't use it).
• Unknown error (if the video can resume then it may not be this case).
• Something else to investigate.

As you can see my time is really limited. To help with this, please do one of the following:

• A reproducible sample code. Ideally using the sample provided by the library, and modify one of it to show your issue.
• If that is not possible, please share the source code that removes everything that is not part of the problem, including parts that is not used by this library (such as the title, the footer, etc in your layout).
• Whenever you make change and find issue, please include the change together. For example, when you say "I remove the artwork", please share that code. ExoPlayer has the Artwork API, Kohii has the Artwork callback so it is difficult for me to know what it is.

[rahul-sysquare]

Thanks for the valuable insights. I'll update the thread with the code. Also, I'll try to create a sample code separate for you.