Compose - 使用 Media3（ExoPlayer）

View版及更多功能使用：详见

一、概念

1.1 实现方式选择

	media3-ui-compose	media3-ui-compose-material3
界面组件	基础组件。	开箱即用，含预设样式的按钮或控件。
状态管理	提供 remember***State 状态持有者来管理逻辑。	在内部管理状态，但仍可根据需要访问状态容器。
使用场景	使用自定义风格构建播放器界面。	使用 Material3 预设快速构建。

1.2 显示组件

ContentFrame

@Composable fun ContentFrame(   player: Player?,   modifier: Modifier = Modifier,   surfaceType: @SurfaceType Int = SURFACE_TYPE_SURFACE_VIEW,   contentScale: ContentScale = ContentScale.Fit,   keepContentOnReset: Boolean = false,   shutter: @Composable () -> Unit = { Box(Modifier.fillMaxSize().background(Color.Black)) }, ) 参数 contentScale：视频缩放。 参数 keepContentOnReset：为 true 播放器重置时将保持最后一帧画面显示，为 false 则会清空渲染表面。 参数 shutter：用于在需要覆盖视频渲染表面时显示。默认情况下，它显示为黑色背景。

1.3 控制组件

组件中可以直接拿到对应状态里的属性/方法（推荐通过this调用方便阅读）。

通用组件	PlayPauseButton	播放和暂停。
	SeekBackButton	根据预设值，向前调整播放进度。
	SeekForwardButton	根据预设值，向后调整播放进度。
	NextButton	跳转到下一个媒体项。
	PreviousButton	跳转到上一个媒体项。
	RepeatButton	切换重复模式。
	ShuffleButton	切换随机模式。
	MuteButton	切换静音模式。
	TimeText	显示时长相关文本。
Material3	PositionAndDurationText	当前位置和总时长的文本。
	PositionText	当前位置的文本。
	DurationText	总时长的文本。
	RemainingDurationText	剩余时长的文本。

自定义方式：

PlayPauseButton(player) {
    Icon(
        modifier = Modifier
            .size(20.dp)
            .clickable(
                enabled = this.isEnabled,
                onClick = { this.onClick() }
            ),
        imageVector = if (this.showPlay) Icons.Default.PlayArrow else Icons.Default.PauseCircle,
        contentDescription = if (this.showPlay) "Play" else "Pause"
    )
}

Material3 方式：

Row {
  SeekBackButton(player)
  PlayPauseButton(player)
  SeekForwardButton(player)
}

1.4 状态（自定义控制组件）

如果上面没有需要的组件，可以自行通过状态来构建自定义组件。

状态	获取方式
播放暂停	rememberPlayPauseButtonState
上一项	rememberPreviousButtonState
下一项	rememberNextButtonState
重复模式	rememberRepeatButtonState
随机模式	rememberShuffleButtonState
播放速度	rememberPlaybackSpeedState

val state = rememberPlayPauseButtonState(player)
Icon(
    modifier = Modifier
        .size(20.dp)
        .clickable(
            enabled = state.isEnabled,
            onClick = { state.onClick() }
        ),
    imageVector = if (state.showPlay) Icons.Default.PlayArrow else Icons.Default.PauseCircle,
    contentDescription = if (state.showPlay) "Play" else "Pause"
)

二、添加依赖

最新版本

[versions]
media3 = "1.9.0"

[libraries]
media3-exoplayer = { module = "androidx.media3:media3-exoplayer", version.ref = "media3" }
media3-datasource-okhttp = { module = "androidx.media3:media3-datasource-okhttp", version.ref = "media3" }
#二选一
media3-ui-compose = { module = "androidx.media3:media3-ui-compose", version.ref = "media3" }
media3-ui-compose-material3 = { moudle = "androidx.media3:media3-ui-compose-material3", version.ref = "media3" }

三、实现方式

3.1 ViewModel

在 ViewModel 中提供 ExoPlayer，将业务和UI分离。

class PlayerVM : ViewModel() {
    private val playlist = mutableListOf<MediaItem>()
    private val playerListener by lazy {
        object : Player.Listener {

        }
    }
    val player by lazy {
        ExoPlayer.Builder(APP.context)
            .setSeekBackIncrementMs(10000)
            .setSeekForwardIncrementMs(10000)
            .build()
            .apply {
                addListener(playerListener)
                setMediaItem(MediaItem.fromUri("https://www.w3schools.com/html/movie.mp4"))
                prepare()
                playWhenReady = true
            }

    }
    override fun onCleared() {
        super.onCleared()
        player.release()
    }
}

3.2 UI

@Composable
private fun Demo(
    viewModel: PlayerVM = viewModel()
) {
    ContentFrame(viewModel.player) 
}