SimpleVideo
SimpleVideo Basic video playback with autoplay and minimal controls. Represents an open container for a video player with built in Play/Pause, full-screen, transcription buttons and accessibility features.
Parameters
Composable function that represents the video player.
The content description for the video player, used for accessibility. This should describe the video content, not the player itself.
Modifier to be applied to the video player.
The aspect ratio of the video player.
The alignment of the buttons in the video player. The default is VideoButtonAlignment.BottomTrailing, which places the additional buttons in the bottom right corner of the video player.
Parameters for the play/pause button, including content description and click action.
Parameters for the full-screen button, including content description and click action.
Parameters for the transcription button, including content description and click action.
An optional lambda that is invoked when the background of the video player is pressed. This can be used for any custom action. A common pattern is to toggle the play/pause state of the video using the play buttons callback.
See also
Samples
import android.annotation.SuppressLint
import android.view.View
import android.widget.FrameLayout
import android.widget.ImageView
import android.widget.VideoView
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.viewinterop.AndroidView
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.SimpleVideo
import net.ikea.skapa.ui.components.SkapaAspectRatio
import net.ikea.skapa.ui.components.VideoButtonAlignment
import net.ikea.skapa.ui.components.VideoPlayerButtonParams
fun main() {
//sampleStart
val videoUrl = "https://www.ikea.com/pvid/0823552_fe001096.mp4"
val playState = remember { mutableStateOf(false) }
SimpleVideo(
aspectRatio = SkapaAspectRatio.Ratio16by9,
player = { VideoPlayer(videoUrl = videoUrl, isPlaying = playState.value) }, // Add player composable here
contentDescription = "Video container description", // Content description for the video container
buttonAlignment = VideoButtonAlignment.BottomTrailing,
playButtonParams = VideoPlayerButtonParams.PlayButtonParams(
isPlaying = playState.value,
contentDescription = "Play / pause video",
onClick = { playState.value = !playState.value }
),
fullScreenParams = VideoPlayerButtonParams.FullScreenParams(
contentDescription = "Full screen",
onClick = {
// Handle full screen click here
}
),
transcriptionParams = VideoPlayerButtonParams.TranscriptionParams(
contentDescription = "Transcription",
onClick = {
// Handle transcription click here
}
),
// Optional: Handle background click for custom action if needed. This example toggles play state.
onBackgroundClick = { playState.value = !playState.value }
)
//sampleEnd
}Deprecated (with error)
Use the overload without isPlaying parameter to manage state internally. This replaceWith helper function does not work flawlessly, there are some parts that needs to be filled in manually. It can possibly also move code around randomly, such as the PlayButtonParams.
Replace with
SimpleVideo(player = player, contentDescription = contentDescription, modifier = modifier, aspectRatio = aspectRatio, buttonAlignment = buttonAlignment, playButtonParams = VideoPlayerButtonParams.PlayButtonParams(isPlaying = isPlaying.value, contentDescription = "Play/Pause video" /* TODO UPDATE CONTENT DESCRIPTION */, onClick = { isPlaying != isPlaying }), fullScreenParams = fullScreenParams, transcriptionParams = transcriptionParams, onBackgroundClick = { /* TODO UPDATE BACKGROUND CLICK ACTION */ })SimpleVideo Basic video playback with autoplay and minimal controls. Represents an open container for a video player with built in Play/Pause, full-screen, transcription buttons and accessibility features.
Parameters
Composable function that represents the video player.
The content description for the video player, used for accessibility. This should describe the video content, not the player itself.
Modifier to be applied to the video player.
The aspect ratio of the video player.
The alignment of the buttons in the video player. The default is VideoButtonAlignment.BottomTrailing, which places the additional buttons in the bottom right corner of the video player.
Parameters for the play/pause button, including content description and click action.
Parameters for the full-screen button, including content description and click action.
Parameters for the transcription button, including content description and click action.
A mutable state that represents whether the video is currently playing or paused.
An optional lambda that is invoked when the background of the video player is pressed. This can be used for any custom action. By default, it toggles the play/pause state of the video using the play buttons callback. If null, no action is taken and the background is not clickable, which means that the video can only be controlled using the buttons.
See also
Samples
import android.annotation.SuppressLint
import android.view.View
import android.widget.FrameLayout
import android.widget.ImageView
import android.widget.VideoView
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.viewinterop.AndroidView
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.SimpleVideo
import net.ikea.skapa.ui.components.SkapaAspectRatio
import net.ikea.skapa.ui.components.VideoButtonAlignment
import net.ikea.skapa.ui.components.VideoPlayerButtonParams
fun main() {
//sampleStart
val videoUrl = "https://www.ikea.com/pvid/0823552_fe001096.mp4"
val playState = remember { mutableStateOf(false) }
SimpleVideo(
aspectRatio = SkapaAspectRatio.Ratio16by9,
player = { VideoPlayer(videoUrl = videoUrl, isPlaying = playState.value) }, // Add player composable here
contentDescription = "Video container description", // Content description for the video container
buttonAlignment = VideoButtonAlignment.BottomTrailing,
playButtonParams = VideoPlayerButtonParams.PlayButtonParams(
isPlaying = playState.value,
contentDescription = "Play / pause video",
onClick = { playState.value = !playState.value }
),
fullScreenParams = VideoPlayerButtonParams.FullScreenParams(
contentDescription = "Full screen",
onClick = {
// Handle full screen click here
}
),
transcriptionParams = VideoPlayerButtonParams.TranscriptionParams(
contentDescription = "Transcription",
onClick = {
// Handle transcription click here
}
),
// Optional: Handle background click for custom action if needed. This example toggles play state.
onBackgroundClick = { playState.value = !playState.value }
)
//sampleEnd
}