Добавление видео всегда было важной частью разработки приложений. Большинство приложений в наши дни имеют бесконечную прокручиваемую ленту, будь то TikTok, Instagram Reels или Snapchat Spotlight.

В этом мы попытаемся создать аналогичный вид с помощью Jetpack Compose и Media3, это действительно просто, мы будем использовать фиктивные данные для этого сценария, а пока сосредоточимся на части представления, как показано ниже.

Почему Jetpack Media3?

У нас есть несколько существующих мультимедийных API: Jetpack Media, также известный как MediaCompat, Jetpack Media2 и ExoPlayer. Эти библиотеки были разработаны с разными целями и имеют несколько областей совпадающей функциональности.

Может быть сложно решить, какую библиотеку использовать для данного варианта использования, а объекты из разных библиотек часто несовместимы, что требует адаптеров или соединительного кода. Media3 устраняет эти проблемы, предоставляя единый набор библиотек, которые хорошо работают вместе.

Требуемые зависимости

implementation 'androidx.media3:media3-exoplayer:1.0.0-alpha03'
implementation "androidx.media3:media3-ui:1.0.0-alpha03"

Создание экземпляра Exoplayer

Мы, прежде всего, передали локальный контекст и построили объект Exoplayer. После этого мы должны установить некоторое значение для этого экземпляра Exoplayer, что я сделал в файле apply{}. Uri будет передан составному объекту.

- DefaultDataSource.Factory() : A DataSource that supports multiple   URI schemes.The supported schemes are file,assets,rawResource, android Resource etc. Factory() creates the instance.
- DataSource.Factory : Reads data from URI-identified resources. A factory for DataSource instances.
- ProgressiveMediaSource.Factory() : Provides one period that loads data from a Uri and extracted using an Extractor. Factory() creates the instance.
- createMediaSource(MediaItem.fromUri(uri)) : Returns a new ProgressiveMediaSource using the current parameters. We pass the media item uri in parameter and it is done.
- setMediaSource(source) : Clears the playlist, adds the specified MediaSource and resets the position to the default position.
- prepare() : Prepares the player. This will move the player out of idle state and the player will start loading media and acquire resources needed for playback.

Настройка просмотра Android

Мы помещаем AndroidView в DisposableEffectфабричные параметры, мы создаем PlayerView . Внутри PlayerViewмы добавляем необходимые настройки, такие как скрытие контроллера, изменение размера, установка проигрывателя, который мы объявили выше и т. д. в разделе onDisposeмы выпускаем экзоплеер. Которая в свою очередь вызывается, когда плеер больше не требуется. Плеер нельзя использовать после вызова этого метода

Некоторые дополнительные конфигурации

playWhenReady в основном устанавливает, должно ли воспроизведение продолжаться, когда getPlaybackState() == STATE_READY. Если проигрыватель уже находится в состоянии готовности, этот метод приостанавливает и возобновляет воспроизведение.

videoScalingMode устанавливает, что режим масштабирования применяется только в том случае, если включен рендерер видео на основе MediaCodec и если выходная поверхность принадлежит SurfaceView.

repeatMode, как следует из названия, повторяет видео.

exoPlayer.playWhenReady = true
exoPlayer.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING
exoPlayer.repeatMode = Player.REPEAT_MODE_ONE

Окончательный видеопроигрыватель

Простой пользовательский интерфейс с Jetpack Compose

Я использовал набор фиктивных данных, перебирая список, используя LazyColumn

Если вы хотите снять на видео весь код проекта, вы можете обратиться сюда



Наконец-то вы это сделали! Вау, вы добавили видеоплеер в приложение Compose, например Spotlight!!🎉

По любым сомнениям и предложениям вы можете обратиться в мой Instagram или LinkedIn. Подписывайтесь на меня, чтобы узнавать о контенте Kotlin и многом другом. Удачного кодирования!

Я буду очень признателен за один из них 👏

Недавний пост