如何在Jetpack Compose应用中正确集成BrightcovePlayer？

核心思路 #

BrightcovePlayer继承自Activity确实无法直接嵌入Compose，但我们可以直接使用它底层的BrightcoveExoPlayerVideoView原生视图，通过Compose的AndroidView组件承载，这样就能在纯Compose界面中实现完整的Brightcove播放功能，无需继承BrightcovePlayerActivity。

步骤1：确认布局文件配置 #

确保你的R.layout.brightcove_video布局文件正确配置Brightcove视图：

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

    <com.brightcove.player.view.BrightcoveExoPlayerVideoView
        android:id="@+id/brightcove_video_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

步骤2：封装Compose播放组件 #

将Brightcove播放逻辑封装成可复用的Compose函数，同时处理Compose生命周期和Brightcove资源释放：

@Composable
fun BrightcoveVideoPlayer(
    videoId: String,
    accountId: String,
    policyKey: String,
    modifier: Modifier = Modifier
) {
    AndroidView(
        modifier = modifier,
        factory = { context ->
            val view = LayoutInflater.from(context).inflate(R.layout.brightcove_video, null, false)
            val brightcoveVideoView = view.findViewById<BrightcoveExoPlayerVideoView>(R.id.brightcove_video_view)

            // 初始化Brightcove Catalog
            val eventEmitter = brightcoveVideoView.eventEmitter
            val catalog = Catalog.Builder(eventEmitter, accountId)
                .setBaseURL(Catalog.DEFAULT_EDGE_BASE_URL)
                .setPolicy(policyKey)
                .build()

            // 加载并播放视频
            catalog.findVideoByID(videoId, object : VideoListener() {
                override fun onVideo(video: Video) {
                    brightcoveVideoView.add(video)
                    brightcoveVideoView.start()
                }
            })

            // 绑定视图生命周期，避免资源泄漏
            view.addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
                override fun onViewAttachedToWindow(v: View) {
                    brightcoveVideoView.onResume()
                }

                override fun onViewDetachedFromWindow(v: View) {
                    brightcoveVideoView.onPause()
                    brightcoveVideoView.stopPlayback()
                    brightcoveVideoView.removeAllViews()
                }
            })

            view
        },
        update = { view ->
            // 重组时如需切换视频，可在此重新调用catalog加载新视频ID
        }
    )
}

步骤3：在Compose界面中使用组件 #

直接在你的Compose布局中调用封装好的播放器组件：

@Composable
fun VideoScreen() {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Brightcove视频播放", modifier = Modifier.padding(16.dp))
        
        BrightcoveVideoPlayer(
            videoId = stringResource(R.string.sdk_demo_videoId),
            accountId = stringResource(R.string.sdk_demo_account),
            policyKey = stringResource(R.string.sdk_demo_policy),
            modifier = Modifier
                .fillMaxWidth()
                .height(240.dp)
                .padding(16.dp)
        )
    }
}

关键注意事项 #

• 生命周期绑定：必须在视图附着/脱离窗口时调用Brightcove的onResume()/onPause()方法，否则会出现播放异常或资源泄漏。
• 事件监听：如果需要处理播放状态（如播放完成、缓冲），可通过eventEmitter添加监听器：

  eventEmitter.on(EventType.DID_FINISH) { 
      // 处理播放完成逻辑
  }
  

• 自定义控制：如需自定义播放控制栏，可在布局文件中添加控制视图，或通过Brightcove API直接调用brightcoveVideoView.pause()/brightcoveVideoView.seekTo()等方法实现控制。

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