VideoPlayer

The VideoPlayer widget is used to show video from uploaded assets or the URL link. The VideoPlayer widget can play various video formats that include but are limited to MP4, MOV, WAV, MPEG, JPEG motion photo, and so on.

Adding VideoPlayer to Your Project

Here's how you can add the VideoPlayer widget to your project:

1. Drag the VideoPlayer widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Path property and enter the URL for the new video.

By default, every VideoPlayer widget added to the project will show a sample video from the internet.

Changing the Video Type

By default, the widget is set to play a video from the internet. However, you can change this to use the video uploaded directly to your app.

Here's how you can change the Video Type:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Video Type dropdown. Click on Network (inside the dropdown) and select Asset.

4. Now, find the Asset Video property, Click on the Upload Video button, select the video and upload it.

If you want to use the same video multiple times in your app, you don't need to upload the same video multiple times. You can use the uploaded video for other VideoPlayer widgets as well.

Once you upload the video, you can use it throughout your app. You can manage your uploaded videos with the Project Media Asset Manager.

To use the uploaded video:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Video Type dropdown. Click on Network (inside the dropdown) and select Asset.

4. Click on No asset select (inside the dropdown) and choose the video.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust the Alignment

Here are the instructions on adjusting the alignment.

Changing Video Dimension

To change the height and width of the video:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Width and Height.

4. There are three ways to set the video dimensions:

   1. To set to an exact size, select PX and enter the desired values.

   2. To set the dimensions as a percent of the screen size, select % and enter the desired value.

   3. To make the height or width of the video the screen's height or width, just click on the infinity icon ().

The VideoPlayer widget inside of the container is constrained by the dimensions of the container. If you want to increase the VideoPlayer size, you will also need to increase the container size.

Setting Aspect Ratio

Setting the Aspect Ratio to the VideoPlayer allows you to show video in a specific aspect ratio. The height of the widget is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height. For example, setting the value of 1.7 will show the video in a 16:9 aspect ratio.

To set the aspect ratio:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Aspect Ratio property, if you want to set the aspect ratio of 16:9, enter the value as 1.7 (Simply divide the 16 by 9).

Try changing the width of VideoPlayer and the height will be adjusted as per the aspect ratio.

Controlling the AutoPlay

The AutoPlay property allows you to configure whether the video should start playing as soon as it loads. By default, this property is disabled and you have to click on the play button to start watching the video.

To enable/disable auto-playing a video:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Auto Play property, checkmark/uncheck to enable or disable autoplay.

Enable/Disable Looping of Video

The Loop Video property allows you to configure whether the video should start playing again after it ends. By default, this property is enabled and the video keeps on playing after it ends.

To enable/disable the looping of video:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Loop Video property, checkmark/uncheck to enable or disable loop video behavior.

Show/Hide Video Controls

The Show Controls property allows you to configure whether the player should show the controls over the video such as play-pause button, seek bar, and so on. By default, this property is enabled and all the video controls are visible over the video.

To show/hide video controls:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Show Controls property, checkmark/uncheck to show or hide controls over the video.

Controlling Full Screen

The Allow Full Screen property allows you to configure whether the player should show the full-screen icon in video controls. By default, this property is enabled and users can open video in full-screen mode by tapping the full-screen icon at the bottom right corner of the player.

To enable/disable full-screen icon:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Allow Full Screen property, checkmark/uncheck to show/hide the full-screen mode icon.

Showing Playback Speed Menu

The Include Speed Playback Menu property allows you to configure whether the player should show the playback speed menu. The playback speed menu helps users to increase or decrease the speed of the video. By default, this property is disabled.

To show the playback speed menu:

1. Select the VideoPlayer widget from the widget tree or from the canvas area.

2. Move to the Property Editor (on the right side of your screen) and scroll down to the Video Player section.

3. Find the Include Playback Speed Menu property, checkmark it (click on it).

Adding Action

To perform any action on click of the Video, add an Action in FlutterFlow. You can find the instructions on adding the Action here.

Showing Firestore Data

To show the data retrieved from your Firestore collection and document into the widget, ensure you:

1. Understand Structuring the Firebase Database.

2. Completed all steps in the Firebase Setup section for your project.

3. Retrieved Data from either collection or document.

4. Finally, to show data into the widget, follow the steps here.

Show/Hide VideoPlayer

Please find the instructions to show/hide the widget here.