Video

To add a video clip to the screen:

  • Use a video element.
  • Connect the player in your app. For more information, see the Video section of the resources page.

Note

For the video to work, you must specify either video_sources or player_settings_payload. If both parameters are missing, a validation error will be generated.

View an interactive example

Video element properties

In the example above:

  • video_sources: An array of variants with different MIME types for the same video. The player selects the source that can be played on the platform. The parameter is optional, but either it or player_settings_payload must be specified.
  • player_settings_payload: Additional settings for an external video player. Used for integration with custom players. The parameter is optional, but either it or video_sources must be specified. Supports expressions; when the value changes while the app is running, the player updates the playback settings.
  • repeatable: Determines whether the video automatically repeats after playback is complete.
  • autostart: Determines whether playback starts automatically.
  • muted: Determines whether the sound is muted during playback.
  • preview: A line that contains a preview image in Base64 encoding that is displayed until the player finishes rendering the first video frame.
  • elapsed_time_variable: Contains the name of the variable that stores the current position of video playback in milliseconds. When the variable value is changed from the outside, the player follows the variable value to set the playback position.
  • playback_speed: Video playback speed. A value of 1.0 corresponds to normal speed, values greater than 1.0 speed up playback, and values less than 1.0 slow it down. Supports using expressions for dynamic speed changes.
  • height: Video element container height.
  • width: Video element container width.
  • preload_required: Deprecated. Will be removed in the next major version of DivKit.

For a detailed description of the video element properties, see the element reference book.

Playback control

The video element only contains the player properties. All video playback control elements are implemented by calling the div-action actions.

Note

On iOS, when multiple videos are placed inside a pager component, the library automatically manages their playback: when a new video starts, all other playing videos in the same pager are automatically paused. This ensures that only one video plays at a time and prevents videos from stopping during page scrolling.

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

In this example, the video starts playing when you click the image. The div-action action call parameters:

  • path: video: Indicates that the action is performed on a video element.

  • id: new_video: The ID of the video element the action is performed on.

  • action: start: The action that's performed over the video. In this case, video playback starts. Supported action parameter values for the video element:

    • start
    • pause

How to connect a video player

For the video element to play videos, the app connects a video player: on Android this is done explicitly, and the other platforms use the standard player. Connecting the standard player and your own one is described in Resources: fonts, images, and video.

Learn more

You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.

DivKit Repository

Previous
Images
Next
Input field