在 Android Jetpack Compose 中创建 ExoPlayer VideoView

简介

Android Jetpack Compose 是 Google 推出的全新 UI 框架，官方声称它是一种“声明式、可组合、现代化的方式构建用户界面”。 ExoPlayer 是 Google 推出的一个功能强大的开源媒体播放器库。在这篇文章中，我们将教你如何在 Android Jetpack Compose 中创建 ExoPlayer VideoView。

步骤

步骤一：声明依赖关系

需要在项目级别的 build.gradle 文件中添加以下行，以依赖所需的 ExoPlayer 库。

allprojects {
    repositories {
        // ...
        mavenCentral()
    }
}

在应用程序级别的 build.gradle文件中添加以下行

dependencies {
    implementation 'com.google.android.exoplayer:exoplayer:2.11.8'
}

步骤二：创建自定义组合

我们需要创建一个名为 ExoPlayerVideoView 的 Composable 函数。这个函数会接受一个视频 URL 作为参数，并返回一个表示视频播放器的组合。

步骤三：创建 ExoPlayer 实例

我们需要先创建一个 ExoPlayer 实例，将视频的 URL 传递给它并以异步方式加载视频。

private fun createPlayer(context: Context, mediaUrl: String): SimpleExoPlayer {
    val defaultBandwidthMeter = DefaultBandwidthMeter.Builder(context).build()
    val trackSelector = DefaultTrackSelector(context)
    val loadControl = DefaultLoadControl()
    return SimpleExoPlayer.Builder(context)
            .setBandwidthMeter(defaultBandwidthMeter)
            .setTrackSelector(trackSelector)
            .setLoadControl(loadControl)
            .build()
            .apply {
                setMediaItem(MediaItem.fromUri(mediaUrl))
                prepare()
            }
}

步骤四：创建 Composable 函数

在 Composable 函数中，我们将使用 Box 构建一个 UI 容器来包含视频播放器，并将 ExoPlayer 的实例添加到视频播放器中，并设置各种回调。

@Composable
fun ExoPlayerVideoView(mediaUrl: String) {
    val player = remember { createPlayer(LocalContext.current, mediaUrl) }
    AndroidView(factory = { context ->
        SimpleExoPlayerView(context).apply {
            this.player = player
            requestFocus()
        }
    }, update = {
    })
}

步骤五：添加权限

由于我们需要访问网络，因此我们需要添加网络权限到我们的 AndroidManifest.xml 文件中。

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

步骤六：使用新的 Composable 函数

现在我们可以在任何 Composable 中使用这个新的 ExoPlayerVideoView 函数，并传递视频 URL 作为参数。

@Composable
fun MyScreen() {
    // ...
    ExoPlayerVideoView(mediaUrl = "https://example.com/video.mp4")
}

结论

在本文中，我们学习了如何在 Android Jetpack Compose 中创建 ExoPlayer VideoView。我们创建了一个 ExoPlayer 实例，并将其添加到应用程序中。我们使用 Composable 函数创建了一个自定义 UI 组件，用于包含视频播放器，并演示了如何在应用程序 UI 中使用它。