--- metadata: - name: generator content: Diplodoc Platform v5.50.3 alternate: - https://divkit.tech/docs/en/concepts/video.md - https://divkit.tech/docs/ru/concepts/video.md --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt # Видео Чтобы добавить на экран видеоролик: - Используйте элемент с типом [`video`](https://divkit.tech/docs/ru/concepts/divs/2/div-video.md). - Подключите в вашем приложении плеер. Подобнее читайте в разделе [Как подключить видеоплеер](https://divkit.tech/docs/ru/concepts/video.md). {% note info %} Для работы видео необходимо указать либо `video_sources`, либо `player_settings_payload`. Если оба параметра отсутствуют, будет сгенерирована ошибка валидации. {% endnote %} {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Свойства элемента video {#params} В примере выше: - `video_sources` — массив из вариантов одного и того же видеоролика с разными MIME-типами. Плеер выбирает из списка тот источник, который может воспроизвести на данной платформе. Параметр является опциональным, но должен быть указан либо он, либо `player_settings_payload`. - `player_settings_payload` — дополнительные настройки для внешнего видеоплеера. Используется для интеграции с кастомными плеерами. Параметр является опциональным, но должен быть указан либо он, либо `video_sources`. - `repeatable` — определяет, будет ли видео автоматически повторяться после завершения воспроизведения. - `autostart` — определяет, будет ли воспроизведение запущено автоматически. - `muted` — определяет, будет ли отключен звук при воспроизведении видео. - `preview` — строка, которая содержит превью — изображение в кодировке Base64, которое будет отображаться до момента, когда плеер закончит рендеринг первого кадра видеоролика. - `elapsed_time_variable` — содержит имя переменной, в которой будет храниться текущая позиция воспроизведения видео в миллисекундах. При изменении значения переменной извне плеер установит позицию воспроизведения в соответствии со значением переменной. - `playback_speed` — скорость воспроизведения видео. Значение 1.0 соответствует нормальной скорости, значения больше 1.0 — ускорению, меньше 1.0 — замедлению. Поддерживает использование [выражений](https://divkit.tech/docs/ru/concepts/expressions.md) для динамического изменения скорости. - `playerSettingsPayload` — JSON-объект с дополнительными настройками видеоплеера. Поддерживает использование [выражений](https://divkit.tech/docs/ru/concepts/expressions.md) для динамического изменения настроек. При изменении этого параметра во время работы приложения видеоплеер автоматически обновит настройки воспроизведения. - `playback_speed` — скорость воспроизведения видео. Положительное число. Значение по умолчанию: 1.0. - `height` — высота контейнера видеоэлемента. - `width` — ширина контейнера видеоэлемента. Подробное описание свойств элемента `video` приведено в [справочнике](https://divkit.tech/docs/ru/concepts/divs/2/div-video.md) элементов. ## Управление воспроизведением {#control} Элемент `video` содержит только свойства плеера, все элементы контроля за воспроизведением видео реализуются с помощью вызова соответствующих [действий `div-action`](https://divkit.tech/docs/ru/concepts/interaction.md). {% cut "Пример кода, реализующего запуск видеоролика" %} ```json translate=no { "type": "image", "scale": "fit", "image_url": "https://sample_host/image.png", "actions": [ { "log_id": "play", "url": "div-action://video?id=new_video&action=start" } ] } ``` {% endcut %} В этом примере при нажатии на изображение запустится воспроизведение видео. Параметры вызова действия `aiv-action`: - `path`: `video` — указывает, что действие производится над элементом типа `video`. - `id`: `new_video` — идентификатор видеоэлемента, над которым будет произведено действие. - `action`: `start` — действие, которое будет произведено над видео. В данном случае — запуск воспроизведения. Поддерживаемые значения параметра `action` для видеоэлемента: - `start` - `pause` ## Как подключить видеоплеер {#embed} DivKit позволяет использовать стандартный плеер или собственный, например для воспроизведения роликов не поддерживаемого стандартным плеером формата или для реализации других необходимых функций. ### Стандартный плеер {#default} По умолчанию DivKit использует стандартный плеер для всех платформ за исключением Android, где требуется подключить плеер явно. #### Android В качестве стандартного плеера для Android в DivKit используется ExoPlayer. Так как инициализация ExoPlayer тяжелая операция, плеер подключается только при явном указании его необходимости в классе `DivConfiguration`. Если вы не планируете использовать видеоплеер в своем приложении, не вызывайте метод `.divPlayerFactory` в билдере (строителе) класса `DivConfiguration`. Для работы со стандартным плеером передайте `ExoDivPlayerFactory` из пакета `com.yandex.div.video` в билдер `DivConfiguration` как аргумент метода `.divPlayerFactory()` . В общем случае класс `DivConfiguration` для работы с поддержкой видео будет выглядеть следующим образом: ```translate=no DivConfiguration.Builder() .divPlayerFactory(ExoDivPlayerFactory()) .build() ``` Если в классе `DivConfiguration` не будет подключен плеер, то при рендеринге экрана с элементом `video` на его месте будет находиться пустой блок соответствующих размеров. #### Остальные платформы На платформах отличных от Android для использования стандартного плеера не требуется явный вызов метода `.divPlayerFactory()`. При создании элемента видео по умолчанию будет применен стандартный для платформы видеоплеер. ### Поддержка кастомного плеера {#custom} Чтобы подключить в DivKit собственный видеоплеер, необходимо создать фабрику, которая будет по запросу DivKit-приложения предоставлять плеер и представление (view) для него. Для этого фабрику необходимо сделать наследником класса `DivPlayerFactory`. Видеоплеер, создаваемый фабрикой, должен реализовывать интерфейс `DivPlayer` и таким образом являться прокси для вызовов из DivKit. При реализации кастомного плеера учитывайте, что свойства типа JSON-объект (например, `playerSettingsPayload`) могут содержать [выражения](https://divkit.tech/docs/ru/concepts/expressions.md), которые необходимо обрабатывать с помощью `expressionResolver`. Например, для `ExoPlayer` реализация методов `DivPlayer` на языке Kotlin выглядит следующим образом. {% cut "Посмотреть пример кода" %} ```csharp translate=no 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, config: DivPlayerPlaybackConfig) { val mediaSource = sourceVariants.toMediaSource() player.setMediaSource(mediaSource) player.prepare() } override fun release() { player.release() } ``` {% endcut %} ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)