Видео

Чтобы добавить на экран видеоролик:

Используйте элемент с типом video.
Подключите в вашем приложении плеер. Подобнее читайте в разделе Как подключить видеоплеер.

Посмотреть интерактивный пример

Свойства элемента video

В примере выше:

video_sources — массив из вариантов одного и того же видеоролика с разными MIME-типами. Плеер выбирает из списка тот источник, который может воспроизвести на данной платформе.
repeatable — определяет, будет ли видео автоматически повторяться после завершения воспроизведения.
autostart — определяет, будет ли воспроизведение запущено автоматически.
muted — определяет, будет ли отключен звук при воспроизведении видео.
preview — строка, которая содержит превью — изображение в кодировке Base64, которое будет отображаться до момента, когда плеер закончит рендеринг первого кадра видеоролика.
elapsed_time_variable — содержит имя переменной, в которой будет храниться текущая позиция воспроизведения видео в миллисекундах. При изменении значения переменной извне плеер установит позицию воспроизведения в соответствии со значением переменной.
height — высота контейнера видеоэлемента.
width — ширина контейнера видеоэлемента.

Подробное описание свойств элемента video приведено в справочнике элементов.

Управление воспроизведением

Элемент video содержит только свойства плеера, все элементы контроля за воспроизведением видео реализуются с помощью вызова соответствующих действий div-action.

Пример кода, реализующего запуск видеоролика

{
  "type": "image",
  "scale": "fit",
  "image_url": "https://sample_host/image.png",
  "actions": [
    {
      "log_id": "play",
      "url": "div-action://video?id=new_video&action=start"
    }
  ]
}

В этом примере при нажатии на изображение запустится воспроизведение видео. Параметры вызова действия aiv-action:

path: video — указывает, что действие производится над элементом типа video.
id: new_video — идентификатор видеоэлемента, над которым будет произведено действие.
action: start — действие, которое будет произведено над видео. В данном случае — запуск воспроизведения. Поддерживаемые значения параметра action для видеоэлемента:
- start
- pause

Как подключить видеоплеер

DivKit позволяет использовать стандартный плеер или собственный, например для воспроизведения роликов не поддерживаемого стандартным плеером формата или для реализации других необходимых функций.

Стандартный плеер

По умолчанию DivKit использует стандартный плеер для всех платформ за исключением Android, где требуется подключить плеер явно.

Android

В качестве стандартного плеера для Android в DivKit используется ExoPlayer.

Так как инициализация ExoPlayer тяжелая операция, плеер подключается только при явном указании его необходимости в классе DivConfiguration. Если вы не планируете использовать видеоплеер в своем приложении, не вызывайте метод .divPlayerFactory в билдере (строителе) класса DivConfiguration.

Для работы со стандартным плеером передайте ExoDivPlayerFactory из пакета com.yandex.div.video в билдер DivConfiguration как аргумент метода .divPlayerFactory() .

В общем случае класс DivConfiguration для работы с поддержкой видео будет выглядеть следующим образом:

DivConfiguration.Builder()
     .divPlayerFactory(ExoDivPlayerFactory())
     .build()

Если в классе DivConfiguration не будет подключен плеер, то при рендеринге экрана с элементом video на его месте будет находиться пустой блок соответствующих размеров.

Остальные платформы

На платформах отличных от Android для использования стандартного плеера не требуется явный вызов метода .divPlayerFactory(). При создании элемента видео по умолчанию будет применен стандартный для платформы видеоплеер.

Поддержка кастомного плеера

Чтобы подключить в DivKit собственный видеоплеер, необходимо создать фабрику, которая будет по запросу DivKit-приложения предоставлять плеер и представление (view) для него. Для этого фабрику необходимо сделать наследником класса DivPlayerFactory.

Видеоплеер, создаваемый фабрикой, должен реализовывать интерфейс DivPlayer и таким образом являться прокси для вызовов из DivKit. Например, для ExoPlayer реализация методов DivPlayer на языке Kotlin выглядит следующим образом.

Посмотреть пример кода

val player: ExoPlayer by lazy {
     SimpleExoPlayer.Builder(context).build()
     }

     override fun play() {
     player.play()
     }

     override fun pause() {
     player.pause()
     }

     override fun seek(toMs: Long) {
     player.seekTo(toMs)
     }

     override fun setSource(sourceVariants: List<DivVideoSource>, config: DivPlayerPlaybackConfig) {
     val mediaSource = sourceVariants.toMediaSource()

     player.setMediaSource(mediaSource)
     player.prepare()
     }

     override fun release() {
     player.release()
     }

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru

Репозиторий DivKit