如何用ExoPlayer3与最新Jetpack Compose实现MP4无控循环自动播放

基于ExoPlayer的正确实现 #

你可以通过官方的ExoPlayer Compose扩展来实现需求，以下是优化后的完整代码，解决控件显示、生命周期绑定和循环播放的问题：

1. 添加依赖 #

首先在build.gradle（Module级别）中引入最新版本的ExoPlayer及其Compose扩展：

implementation "com.google.android.exoplayer:exoplayer:2.19.1" // 替换为当前最新版本
implementation "com.google.android.exoplayer:exoplayer-compose:2.19.1"

2. Compose组件实现 #

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.viewinterop.AndroidView
import com.google.android.exoplayer2.ExoPlayer
import com.google.android.exoplayer2.MediaItem
import com.google.android.exoplayer2.ui.AspectRatioFrameLayout
import com.google.android.exoplayer2.ui.PlayerView

@Composable
fun RawResourceBackgroundVideo(videoResId: Int) {
    val context = LocalContext.current
    // 用remember缓存播放器实例，避免重组重复创建
    val exoPlayer = remember {
        ExoPlayer.Builder(context).build().apply {
            // 开启循环播放
            repeatMode = ExoPlayer.REPEAT_MODE_ALL
            // 加载res/raw中的视频资源
            setMediaItem(MediaItem.fromResource(context, videoResId))
            prepare()
            playWhenReady = true // 自动播放
        }
    }

    // 绑定生命周期，组件销毁时释放播放器资源
    DisposableEffect(exoPlayer) {
        onDispose {
            exoPlayer.release()
        }
    }

    // 渲染播放器视图，隐藏所有控件
    AndroidView(
        factory = {
            PlayerView(it).apply {
                player = exoPlayer
                // 禁用所有控制器相关功能
                useController = false
                controllerAutoShow = false
                controllerHideOnTouch = false
                // 设置视频铺满屏幕
                resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FILL
            }
        },
        modifier = Modifier.fillMaxSize()
    )
}

3. 使用示例 #

如果要在页面中叠加其他UI元素，直接将视频作为底层布局即可：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun HomeScreen() {
    Box(modifier = Modifier.fillMaxSize()) {
        // 背景视频，传入你的res/raw资源ID
        RawResourceBackgroundVideo(videoResId = R.raw.background_video)
        // 叠加前景内容
        Text(
            text = "你的页面内容",
            color = Color.White,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

关于Video Compose的说明 #

目前官方并没有单独的"Video Compose"库，Jetpack Compose中的视频播放能力，官方推荐的就是基于ExoPlayer的exoplayer-compose扩展——也就是上面代码中用到的库。它是ExoPlayer专门为Compose打造的适配层，覆盖了绝大多数视频播放场景。

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