Video Player

Overview

The Video Player component allows for the embedding of a video within an application, utilizing the native video player capabilities of the platform. It supports various functionalities such as autostart, playback speed adjustment, control visibility, and auto-looping. This component is designed to provide a seamless video playback experience, integrating smoothly with the overall design and functionality of the application.

Sample JSON

videoPlayer.json

{
    "type": "videoPlayer",
    "data": {
        "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        "autoStart": true,
        "playbackSpeed": 2.0,
        "playbackControlsHidden": false,
        "isAutoLooping": false
    },
    "style": {
        "height": 250,
        "width": 300,
        "cornerRadius": 20,
        "padding": {
            "top": 0,
            "right": 0,
            "bottom": 0,
            "left": 0
        }
    }
}

This configuration demonstrates the Video Player component set to autoplay the provided video URL at double the normal playback speed. It displays playback controls, does not loop automatically, and is styled with specific dimensions and corner rounding for aesthetic integration within the app.

Data Properties

The data properties define the content and behavior of the Video Player component. Below are the available data properties:

Property	Type	Description
url	String	The URL of the video to be played.
autoStart	Bool	Specifies whether the video should start playing automatically.
playbackSpeed	Int	Sets the initial playback speed of the video.
playbackControlsHidden	Bool	Controls the visibility of the playback controls.
isAutoLooping	Bool	Determines whether the video should loop automatically.

url

• Type: String (required)
• Description: The location of the video file that will be played in the Video Player. This URL must be accessible and point directly to a video file.

autoStart

• Type: Bool (optional)
• Description: When set to true, the video begins to play as soon as the component is loaded. This is useful for creating a dynamic, engaging user experience.

playbackSpeed

• Type: Int (optional)
• Description: Allows setting a default playback speed for the video. For example, a value of 2 would play the video at double its normal speed.

playbackControlsHidden

• Type: Bool (optional)
• Description: Determines the visibility of the video's playback controls. Setting this to true hides the controls, offering a cleaner look, but at the expense of user control.

isAutoLooping

• Type: Bool (optional)
• Description: If set to true, the video will automatically restart from the beginning once it reaches the end, creating a continuous loop.

Style Properties

info

The style properties are optional. If you don't specify any style properties, the component will use the default values.

The following table outlines the available style properties for the Video Player component:

Here's the table with the platform column replaced with "android" and "iOS":

Property	Type	Platform	Required	Description
height	Float	android, iOS	false	The vertical size of the video player.
width	Float	android, iOS	false	The horizontal size of the video player.
cornerRadius	Float	android, iOS	false	The radius of the video player's corners.
padding	JSON	android, iOS	false	The internal spacing around the video player component.

height

• Type: Float (optional)
• Description: Specifies the height of the video player in the layout, allowing for precise control over its size and aspect ratio.

width

• Type: Float (optional)
• Description: Sets the width of the video player, providing flexibility in how the video is displayed within different layouts.

cornerRadius

• Type: Float (optional)
• Description: Adjusts the roundness of the video player's corners, which can help the video player blend more seamlessly with the app's design aesthetic.

padding

• Type: JSON (optional)
• Description: Defines the space around the video player component, specified with top, right, bottom, and left values. This property helps in placing the video player within the UI without it touching other components directly.

Each of these style properties enhances the flexibility and visual integration of the Video Player component within an application, ensuring a smooth and customizable user experience.