Jetpack Composeを使用したビデオプレーヤーの実装方法 - コード例と解析


  1. ビデオの再生: ビデオを再生するために、VideoViewを使用します。Composeでは、VideoViewをラップするComposeビューを作成する必要があります。以下は、ビデオの再生を開始するための簡単なコード例です。
@Composable
fun VideoPlayer() {
    val context = ContextAmbient.current
    AndroidView(factory = { context ->
        VideoView(context).apply {
            setVideoPath("video_path")
            start()
        }
    })
}
  1. コントロールバーの作成: ビデオプレーヤーには、再生、一時停止、進む、巻き戻しなどのコントロールを含めることが一般的です。これらのコントロールを作成するために、Jetpack Composeのボタンやスライダーなどのコンポーネントを使用します。以下は、再生/一時停止ボタンとスライダーの例です。
@Composable
fun VideoPlayerControls() {
    Row(
        horizontalArrangement = Arrangement.Center,
        modifier = Modifier.padding(16.dp)
    ) {
        Button(onClick = { /* 再生/一時停止のロジックを実行 */ }) {
            Text(text = "再生/一時停止")
        }
        Slider(
            value = 0f,
            onValueChange = { /* スライダーの値を更新するロジック */ }
        )
    }
}
  1. ビデオのサムネイル表示: ビデオのサムネイルは、ユーザーがビデオを選択する前にプレビューするための便利な機能です。Composeでは、Imageコンポーネントを使用してビデオのサムネイルを表示できます。以下は、サムネイルの表示例です。
@Composable
fun VideoThumbnail() {
    Image(
        painter = rememberImagePainter("thumbnail_url"),
        contentDescription = "ビデオのサムネイル"
    )
}