exoplayer 관련

Question

package com.blogger.myapplication

import android.net.Uri
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.media3.common.MediaItem
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.ui.PlayerView
import com.blogger.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Screen()
                }
            }
        }
    }
}

@Composable
fun Screen() {
    var videoSrc = arrayOf("video_973.mp4", "video_974.mp4", "video_975.mp4")
    var idx by rememberSaveable { mutableStateOf(0)}

    Column(modifier = Modifier
        .padding(30.dp)
        .fillMaxWidth()
        .verticalScroll(rememberScrollState())) {

        Row() {
            Button(onClick = { idx-- }) {
                if (idx <= 0)
                    idx = 0
                Text("Prev", textAlign = TextAlign.Start)
            }
            Button(onClick = { idx++ }) {
                if (idx >= videoSrc.size)
                    idx = 2
                Text("Next" + videoSrc.size, textAlign = TextAlign.End)
            }
        }

        var video = "asset:///video/"+videoSrc[idx]
        Text("idx = " + idx + "::" + video, textAlign = TextAlign.Center)

        Column(modifier = Modifier.padding(30.dp).fillMaxWidth().height(220.dp)) {
            VideoPlayer(video)
        }
    }
}

@Composable
fun VideoPlayer(videoUrl: String) {
    val context = LocalContext.current
    val player = ExoPlayer.Builder(context).build().apply {
        setMediaItem(MediaItem.fromUri(videoUrl))
    }
    val playerView = PlayerView(context)
    val playWhenReady by rememberSaveable {
        mutableStateOf(true)
    }
    playerView.player = player
    LaunchedEffect(player) {
        player.prepare()
        player.playWhenReady = playWhenReady
    }

    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clip(RoundedCornerShape(16.dp)),
        factory = { playerView
        })
}

 

Next 버튼 또는 Prev 버튼을 누르면 동영상이 videoSrc에잇는걸 재생하려합니다.

그런데 버튼을 눌러도 처음에 실행되는 동영상만 재생되네요...

왜이런가요????

Answer 1

ExoPlayer가 videoURL 변경시에 ExoPlayer가 해당 변경사항을 잘 반영하는지 확인해 보세요.

@Composable
fun VideoPlayer(videoUrl: String) {
    val context = LocalContext.current
    val player = remember { ExoPlayer.Builder(context).build() }
    val playerView = remember { PlayerView(context) }
    val playWhenReady by rememberSaveable {
        mutableStateOf(true)
    }

    LaunchedEffect(videoUrl) {
        player.setMediaItem(MediaItem.fromUri(videoUrl))  // <--- 
        player.prepare()
        player.playWhenReady = playWhenReady
    }

    DisposableEffect(player) {
        playerView.player = player
        onDispose {
            player.release()
        }
    }

    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clip(RoundedCornerShape(16.dp)),
        factory = { playerView }
    )
}

 

Comments

감사합니다. 잘되네요.