大屏设备Pager View中ExoPlayer视频帧重叠问题求助

问题描述 #

• 在Pager View中集成ExoPlayer时，仅在6.6英寸及以上大屏设备出现当前播放视频与相邻页面视频第一帧重叠的问题，小屏设备无此现象。
• 已尝试调整Player View宽高，未解决问题。

可能原因 #

1. 大屏布局裁剪失效：大屏设备的屏幕密度或布局计算逻辑差异，导致Pager View父容器未正确裁剪子View，相邻页面的Player View内容溢出到当前页面。
2. ExoPlayer Surface残留：页面切换时，非当前页面的ExoPlayer Surface未及时清理，第一帧画面残留在渲染层。
3. Pager预加载布局泄漏：ViewPager默认预加载相邻页面，大屏上预加载页面的View未被完全隐藏，导致内容叠加。

解决方案 #

1. 强制父容器裁剪子View #

给Player View的直接父布局添加裁剪属性，确保子View不会超出容器边界：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="true"
    android:clipToPadding="true">

    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

2. 页面切换时管理ExoPlayer状态 #

在Pager的页面选中回调中，对非当前页面的Player执行暂停+清除Surface操作，避免画面残留：

// 假设使用ViewPager2
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    private var lastPosition = 0

    override fun onPageSelected(position: Int) {
        // 获取对应位置的Player实例和PlayerView
        val lastPlayer = getPlayer(lastPosition)
        val currentPlayer = getPlayer(position)

        lastPlayer?.apply {
            stop()
            clearVideoSurface()
            // 若无需保留播放器实例，可调用release()释放资源
        }

        currentPlayer?.apply {
            if (!playWhenReady) {
                play()
            }
        }
        lastPosition = position
    }
})

3. 限制Pager预加载数量 #

使用ViewPager2时，将预加载页面数设为0，减少相邻页面View的渲染：

viewPager2.offscreenPageLimit = 0

4. 切换Surface类型 #

将Player View的Surface改为TextureView，部分场景下TextureView的裁剪表现更稳定：

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:surface_type="texture_view" />

验证建议 #

1. 在目标大屏设备上逐一测试上述方案，观察重叠现象是否消失。
2. 切换页面时检查后台Player的状态，确保Surface已被正确清理。

内容的提问来源于stack exchange，提问作者Eman Nollase