Introducing Compose Multiplatform Media Player: Your Go-To Solution for Seamless Media Playback

In today’s digital age, media consumption is an integral part of our lives. Whether it’s watching videos, playing audio or browsing through reels, users expect a seamless and immersive experience. However, building a media player that works seamlessly across different platforms can be a daunting task. That’s where Compose Multiplatform Media Player comes to the rescue!

What is Compose Multiplatform Media Player?
Compose Multiplatform Media Player is a powerful media player library designed specifically for Compose Multiplatform projects. It provides developers with the tools they need to effortlessly integrate video player, audio player and reel player into their applications, all while maintaining a consistent experience across both iOS and Android platforms.

Key Features

Cross-Platform Compatibility
With Compose Multiplatform Media Player, you can rest assured that your media player will work flawlessly on both iOS and Android platforms within Compose Multiplatform projects. Say goodbye to platform-specific headaches and hello to a seamless development experience.

Video Player & Audio Player
Easily incorporate video and audio playback functionality into your app with high performance and reliability.

Reel Player
Experience reel viewing like never before with support for both horizontal and vertical scrolling. Whether your users prefer to swipe through content or scroll vertically, our media player ensures a smooth and intuitive experience.

Customizable Controls
Enhance your media player with extensive customization options. Enable or disable pause/resume functionality, toggle the visibility of the seek bar, and control playback time duration display. Customize the colors, icons, and sizes of various controls, including seek bar, fast forward/backward, and mute/unmute, to fit your app’s design perfectly.

Getting Started

Getting started with Compose Multiplatform Media Player is easy! Simply add the library as a dependency in your project’s `build.gradle.kts` file, and you’re good to go:

commonMain.dependencies {
   implementation("network.chaintech:compose-multiplatform-media-player:1.0.11")
}

Once you’ve added the dependency, you can start using the library’s composable functions to integrate video player and reel player into your app:

// Video Playback
VideoPlayerView(
 modifier = Modifier.fillMaxSize(),
 url = videoUrl
)

// Reel Viewing
ReelsPlayerView(
 modifier = Modifier.fillMaxSize(),
 urls = videoUrlArray
)

//Audio Playback
AudioPlayerView(
    modifier = Modifier,
    audios = audioFilesArray
)

Customization Options

Our media player library offers a wide range of customization options to suit your app’s needs:

modifier: Modify the layout and appearance of the media player.

url: Provide the URL of the video to be played.

urls: Pass an array of URLs for reel viewing.

playerConfig: You can configure various aspects of the video player appearance and behavior.

• isPauseResumeEnabled: Enable or disable the pause/resume functionality.
• isSeekBarVisible: Toggle the visibility of the seek bar.
• isDurationVisible: Control the display of the playback time duration.
• seekBarThumbColor: Customize the color of the seek bar thumb.
• seekBarActiveTrackColor: Customize the color of the seek bar’s active track, representing the portion of the media content that has already been played.
• seekBarInactiveTrackColor: Customize the color of the seek bar’s inactive track, representing the remaining portion of the media content yet to be played.
• durationTextColor: Customize the color of the duration text displayed alongside the seek bar.
• durationTextStyle: Customize the text style of the duration text, including font size and weight.
• seekBarBottomPadding: Configure the bottom padding for the seek bar control, ensuring proper alignment within the UI layout.
• playIconResource & pauseIconResource: Customize the play and pause button icons.
• pauseResumeIconSize: Customize the size of the pause/resume icons.
• reelVerticalScrolling: Manage vertical and horizontal scrolling in reel viewing.
• isAutoHideControlEnabled & controlHideIntervalSeconds: Enable the automatic hiding of controls after a specified time interval (in seconds).
• isFastForwardBackwardEnabled: Enable or disable fast forward and backward controls.
• fastForwardBackwardIconSize: Customize the size of the fast forward/backward icons.
• fastForwardIconResource & fastBackwardIconResource: Customize the icons for fast forward and fast backward controls.
• fastForwardBackwardIntervalSeconds: Set the interval (in seconds) for fast forward and backward actions.
• isMuteControlEnabled: Enable or disable mute control functionality.
• unMuteIconResource & muteIconResource: Customize the icons for unmute and mute controls.
• topControlSize: Customize the size of the top control buttons.
• isSpeedControlEnabled: Enable or disable speed control functionality.
• speedIconResource: Customize the icon for speed control.
• isFullScreenEnabled: Enable or disable full-screen functionality.
• controlTopPadding: Configure the top padding for controls, ensuring proper alignment within the UI layout.
• isScreenLockEnabled: Enable or disable screen lock functionality.
• iconsTintColor: Customize the tint color of the control icons.

audioPlayerConfig: You can configure various aspects of the audio player appearance and behavior.

• isControlsVisible: Toggle the visibility of the player controls.
• backgroundColor: Customize the background color of the audio player.
• coverBackground: Customize the background color of the cover image.
• seekBarThumbColor: Customize the color of the seek bar thumb.
• seekBarActiveTrackColor: Customize the color of the seek bar’s active track, representing the portion of the media content that has already been played.
• seekBarInactiveTrackColor: Customize the color of the seek bar’s inactive track, representing the remaining portion of the media content yet to be played.
• fontColor: Customize the color of the text used in the player.
• durationTextStyle: Customize the text style of the duration text, including font size and weight.
• titleTextStyle: Customize the text style of the title text, including font size and weight.
• controlsBottomPadding: Configure the bottom padding for the controls, ensuring proper alignment within the UI layout.
• playIconResource & pauseIconResource : Customize the play and pause button icons.
• pauseResumeIconSize: Customize the size of the pause/resume icons.
• previousNextIconSize: Customize the size of the previous and next track icons.
• previousIconResource & nextIconResource: Customize the icons for the previous and next track controls.
• iconsTintColor: Customize the tint color of the control icons.
• loadingIndicatorColor: Customize the color of the loading indicator.
• shuffleOnIconResource & shuffleOffIconResource: Customize the icons for the shuffle control when enabled and disabled.
• advanceControlIconSize: Customize the size of the advance control icons (e.g., shuffle/repeat).
• repeatOnIconResource & repeatOffIconResource: Customize the icons for the repeat control when enabled and disabled.

VideoPlayerView(modifier = Modifier.fillMaxSize(),
                url = videoUrl,
                playerConfig = PlayerConfig(
                    isPauseResumeEnabled = true,
                    isSeekBarVisible = true,
                    isDurationVisible = true,
                    seekBarThumbColor = Color.Red,
                    seekBarActiveTrackColor = Color.Red,
                    seekBarInactiveTrackColor = Color.White,
                    durationTextColor = Color.White,
                    seekBarBottomPadding = 10.dp,
                    pauseResumeIconSize = 40.dp,
                    isAutoHideControlEnabled = true,
                    controlHideIntervalSeconds = 5,
                    isFastForwardBackwardEnabled = true,
                    playIconResource = Res.drawable.icn_play,
                    pauseIconResource = Res.drawable.icn_pause,
                )
            )

VideoPlayerView(modifier = Modifier.fillMaxSize(),
                url = videoUrl,
                playerConfig = PlayerConfig(
                    isPauseResumeEnabled = false,
                    isSeekBarVisible = false,
                    isDurationVisible = false,
                    isMuteControlEnabled = false,
                    isSpeedControlEnabled = false,
                    isFullScreenEnabled = false,
                    isScreenLockEnabled = false
                )
            )

ReelsPlayerView(modifier = Modifier.fillMaxSize(),
        urls = videoUrlArray,
        playerConfig = PlayerConfig(
            isPauseResumeEnabled = true,
            isSeekBarVisible = false,
            isDurationVisible = false,
            isMuteControlEnabled = false,
            isSpeedControlEnabled = false,
            isFullScreenEnabled = false,
            isScreenLockEnabled = false,
            reelVerticalScrolling = true
        )
    )

ReelsPlayerView(modifier = Modifier.fillMaxSize(),
        urls = videoUrlArray,
        playerConfig = PlayerConfig(
            isPauseResumeEnabled = false,
            isSeekBarVisible = false,
            isDurationVisible = false,
            isMuteControlEnabled = false,
            isSpeedControlEnabled = false,
            isFullScreenEnabled = false,
            isScreenLockEnabled = false, 
            reelVerticalScrolling = false
        )
    )

val audioFilesArray = listOf(
        AudioFile(
            audioUrl = "https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3",
            audioTitle = "Galaxy Invaders",
            thumbnailUrl = "https://c.saavncdn.com/866/On-My-Way-English-2019-20190308195918-500x500.jpg"
        ),
        AudioFile(
            audioUrl = "https://codeskulptor-demos.commondatastorage.googleapis.com/pang/paza-moduless.mp3",
            audioTitle = "Paza Moduless"
        )
    )

AudioPlayerView(
        modifier = Modifier,
        audios = audioFilesArray,
        audioPlayerConfig = AudioPlayerConfig(
            isControlsVisible = true,
            fontColor = Color.White,
            iconsTintColor = Color.White
        )
    )

Conclusion

With Compose Multiplatform Media Player, building a seamless media playback experience for your app has never been easier. Whether you’re a seasoned developer or just getting started with Compose Multiplatform, our library empowers you to create engaging and immersive media experiences that delight your users.
So why wait? Give Compose Multiplatform Media Player a try today and take your app’s media playback to the next level!

All the code and examples it is in this repository.

Connect with us 👇

Linkedin

GitHub