2023年YouTube Android Player API弃用后，Android Studio中ViewPager内播放器实现

由于YouTube Android Player API已在2023年弃用，我们可以通过WebView加载YouTube嵌入播放页面的方式实现需求，这种方案能保留YouTube原生的播放/暂停控制栏，同时轻松处理ViewPager滑动时的视频停止逻辑。

实现步骤 #

1. 定义ViewPager的Item布局 #

创建item_youtube_player.xml，作为每个视频页面的基础布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/webview_youtube"
        android:layout_width="match_parent"
        android:layout_height="250dp" />

    <!-- 可添加其他页面元素，比如视频标题、描述等 -->
</LinearLayout>

2. 实现ViewPager的Adapter #

这里以适配ViewPager2的RecyclerView.Adapter为例，为每个页面配置WebView的YouTube播放逻辑：

class YoutubePagerAdapter(private val videoIds: List<String>) : RecyclerView.Adapter<YoutubePagerAdapter.ViewHolder>() {

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val webView: WebView = itemView.findViewById(R.id.webview_youtube)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_youtube_player, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val videoId = videoIds[position]
        // 构造带JS API的YouTube嵌入地址，用于后续控制播放状态
        val embedUrl = "https://www.youtube.com/embed/$videoId?enablejsapi=1"

        // 配置WebView支持JavaScript（YouTube嵌入依赖JS运行）
        val webSettings = holder.webView.settings
        webSettings.javaScriptEnabled = true
        webSettings.domStorageEnabled = true
        webSettings.mediaPlaybackRequiresUserGesture = false // 可选：允许自动播放（需根据需求调整）

        // 加载YouTube嵌入播放页面
        holder.webView.loadUrl(embedUrl)
    }

    override fun getItemCount() = videoIds.size
}

3. 处理ViewPager滑动时的视频暂停 #

监听ViewPager的页面切换事件，在页面滑出视野时，通过JavaScript暂停对应WebView中的视频：

// 假设你的ViewPager2实例为viewPager，Adapter实例为youtubeAdapter
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        // 遍历所有页面，暂停非当前页面的视频
        for (index in 0 until youtubeAdapter.itemCount) {
            if (index != position) {
                val holder = viewPager.findViewHolderForAdapterPosition(index) as? YoutubePagerAdapter.ViewHolder
                holder?.webView?.evaluateJavascript(
                    "if(document.querySelector('video')) document.querySelector('video').pause();",
                    null
                )
            }
        }
    }
})

4. 配置必要权限 #

在AndroidManifest.xml中添加网络权限，确保WebView能正常加载YouTube页面：

<uses-permission android:name="android.permission.INTERNET" />

关键细节说明 #

• 原生控制栏保留：加载官方嵌入页面后，WebView会自动渲染YouTube的默认播放/暂停、进度条、音量控制等组件，无需自定义控制逻辑。
• 视频停止逻辑：通过执行JavaScript调用HTML5视频的pause()方法，确保滑出视野的视频立即停止，避免后台播放消耗设备资源。
• 全屏适配：如果需要支持全屏播放，可以利用YouTube嵌入页面的原生全屏按钮，也可以为WebView添加全屏回调逻辑做自定义适配。

内容的提问来源于stack exchange，提问作者Surajkaran Meghwanshi