在 Android Jetpack Compose 中创建 ExoPlayer VideoView

ExoPlayer是一个与 MediaPlayer 非常相似的应用级媒体播放器。与 MediaPlayer 不同，ExoPlayer 建立在 Android 中的低级媒体 API 之上，具有许多优点，例如支持 DASH 和 SmoothStreaming 自适应播放。 ExoPlayer 具有高度可定制性和可扩展性，使其能够用于许多高级用例。它是 Google 应用程序使用的一个开源项目，包括 YouTube 和 Google Play 影视。在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 中实现 ExoPlayer 播放视频。 IDE 准备就绪后，请按照以下步骤操作。

分步实施

第 1 步：在 Android Studio 中创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。选择模板时，选择Empty Compose Activity 。如果您没有找到此模板，请尝试将 Android Studio 升级到最新版本。我们在Kotlin中演示了该应用程序，因此请确保在创建新项目时选择 Kotlin 作为主要语言。

第 2 步：在 AndroidManifest.xml 文件中添加 INTERNET 权限

转到AndroidManifest.xml文件并添加INTERNET权限，如下所示。

第 3 步：在 build.gradle (app) 文件中添加 ExoPlayer 依赖项

转到 app build.gradle文件并在依赖项部分添加此依赖项。始终添加最新版本的依赖项以使应用程序正常运行。 ExoPlayer 的最新依赖可以在这里找到：RELEASE NOTES

// Exo Player Library
implementation "com.google.android.exoplayer:exoplayer:2.16.1"

第 4 步：使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

科特林

package com.geeksforgeeks.jcvideo
  
import android.net.Uri
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.viewinterop.AndroidView
import com.google.android.exoplayer2.ExoPlayer
import com.google.android.exoplayer2.source.ProgressiveMediaSource
import com.google.android.exoplayer2.ui.PlayerView
import com.google.android.exoplayer2.upstream.DefaultDataSourceFactory
import com.google.android.exoplayer2.util.Util
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Calling the composable function 
            // to display element and its contents
            MainContent()
        }
    }
}
  
// Creating a composable 
// function to display Top Bar
@Composable
fun MainContent() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("GFG | ExoPlayer Video", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
        content = { MyContent() }
    )
}
  
// Creating a composable function to create
// two Images and a spacer between them
// Calling this function as content in the above function
@Composable
fun MyContent(){
  
    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
  
        // Fetching the Local Context
        val mContext = LocalContext.current
  
        // Declaring a string value 
        // that stores raw video url
        val mVideoUrl = "https://cdn.videvo.net/videvo_files/video/free/2020-05/large_watermarked/3d_ocean_1590675653_preview.mp4"
  
        // Declaring ExoPlayer
        val mExoPlayer = remember(mContext) {
            ExoPlayer.Builder(mContext).build().apply {
                val dataSourceFactory = DefaultDataSourceFactory(mContext, Util.getUserAgent(mContext, mContext.packageName))
                val source = ProgressiveMediaSource.Factory(dataSourceFactory).createMediaSource(Uri.parse(mVideoUrl))
                prepare(source)
            }
        }
  
        // Implementing ExoPlayer
        AndroidView(factory = { context ->
            PlayerView(context).apply {
                player = mExoPlayer
            }
        })
    }
}
  
// For displaying preview in 
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

在下面的视频中，您可以看到 ExoPlayer 已成功实现。