Skip to content

Commit ad2ceff

Browse files
pinkeshmarsPoojaB26
pinkeshmars
and
PoojaB26
authored
Missing topics 2.3 (#112)
* Added youtube player * Added video player * Added blur widget * Added braintree payments * Added firebase delete and update email action * Added colors, typograhpy, theme widget * Address review comments * Moved Firebase logout action at common place * Added info on MediaDisplay widget * Rename title * Add keywords & tags * Moved MediaDisplay widget to component --------- Co-authored-by: PoojaB26 <[email protected]>
1 parent 4551ab5 commit ad2ceff

37 files changed

+1855
-119
lines changed

‎docs/ff-concepts/design-system/design-system.md

Lines changed: 690 additions & 3 deletions
Large diffs are not rendered by default.

‎docs/ff-concepts/design-system/imgs/with-responsive-text.avif

53.9 KB
Binary file not shown.

‎docs/ff-concepts/design-system/imgs/without-responsive-text.avif

99.8 KB
Binary file not shown.

‎docs/ff-concepts/file-handling/imgs/full-screen-control-disabled.avif

604 KB
Binary file not shown.

‎docs/ff-concepts/file-handling/imgs/show-controls-disabled.avif

498 KB
Binary file not shown.

‎docs/ff-concepts/file-handling/imgs/show-controls-enabled.avif

593 KB
Binary file not shown.

‎docs/ff-concepts/file-handling/video/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Video",
3+
"position": 1
4+
}

‎docs/ff-concepts/file-handling/video/video-player.md

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
---
2+
title: VideoPlayer
3+
slug: /concepts/file-handling/video-player
4+
sidebar_position: 0
5+
tags: [Media, Widget]
6+
keywords: [Media, VideoPlayer, Play Video]
7+
---
8+
9+
# VideoPlayer
10+
11+
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.
12+
13+
## Adding VideoPlayer Widget
14+
15+
Here's how you can add the VideoPlayer widget to your project:
16+
17+
1. Drag the **VideoPlayer** widget from the **Base Elements** tab (in the Widget Panel) or add it directly from the widget tree.
18+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
19+
3. Find the **Path** property and enter the **URL** for the new video.
20+
21+
:::info
22+
By default, every VideoPlayer widget added to the project will show a sample video from a network URL.
23+
:::
24+
25+
<div style={{
26+
position: 'relative',
27+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
28+
height: 0,
29+
width: '100%'}}>
30+
<iframe
31+
src="https://demo.arcade.software/nHAgkrH8h6iYcJztASwU?embed&show_copy_link=true"
32+
title=""
33+
style={{
34+
position: 'absolute',
35+
top: 0,
36+
left: 0,
37+
width: '100%',
38+
height: '100%',
39+
colorScheme: 'light'
40+
}}
41+
frameborder="0"
42+
loading="lazy"
43+
webkitAllowFullScreen
44+
mozAllowFullScreen
45+
allowFullScreen
46+
allow="clipboard-write">
47+
</iframe>
48+
</div>
49+
<p></p>
50+
51+
## Changing the Video Type
52+
53+
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.
54+
55+
Here's how you can change the Video Type:
56+
57+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
58+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
59+
3. Find the **Video Type** dropdown. Click on **Network** (inside the dropdown) and select **Asset**.
60+
4. Now, find the **Asset Video** property, Click on the **Upload Video** button, select the video and upload it.
61+
62+
<div style={{
63+
position: 'relative',
64+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
65+
height: 0,
66+
width: '100%'}}>
67+
<iframe
68+
src="https://demo.arcade.software/ojeirHeMPqSHS5VNoHcu?embed&show_copy_link=true"
69+
title=""
70+
style={{
71+
position: 'absolute',
72+
top: 0,
73+
left: 0,
74+
width: '100%',
75+
height: '100%',
76+
colorScheme: 'light'
77+
}}
78+
frameborder="0"
79+
loading="lazy"
80+
webkitAllowFullScreen
81+
mozAllowFullScreen
82+
allowFullScreen
83+
allow="clipboard-write">
84+
</iframe>
85+
</div>
86+
<p></p>
87+
88+
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.
89+
90+
:::tip
91+
Once you upload the video, you can use it throughout your app. You can manage your uploaded videos with the Project Media Asset Manager.
92+
:::
93+
94+
To use the uploaded video:
95+
96+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
97+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
98+
3. Find the **Video Type** dropdown. Click on **Network** (inside the dropdown) and select **Asset**.
99+
4. Click on **No asset select** (inside the dropdown) and choose the video.
100+
101+
## Customization
102+
103+
You can customize the appearance of this widget using the various properties available under the properties panel.
104+
105+
### Setting Aspect Ratio
106+
107+
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.
108+
109+
To set the aspect ratio:
110+
111+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
112+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
113+
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).
114+
115+
:::tip
116+
Try changing the width of VideoPlayer and the height will be adjusted as per the aspect ratio.
117+
:::
118+
119+
<div style={{
120+
position: 'relative',
121+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
122+
height: 0,
123+
width: '100%'}}>
124+
<iframe
125+
src="https://demo.arcade.software/jA0siXyl8MvI4Gs3tYAR?embed&show_copy_link=true"
126+
title=""
127+
style={{
128+
position: 'absolute',
129+
top: 0,
130+
left: 0,
131+
width: '100%',
132+
height: '100%',
133+
colorScheme: 'light'
134+
}}
135+
frameborder="0"
136+
loading="lazy"
137+
webkitAllowFullScreen
138+
mozAllowFullScreen
139+
allowFullScreen
140+
allow="clipboard-write">
141+
</iframe>
142+
</div>
143+
<p></p>
144+
145+
### Controlling the AutoPlay
146+
147+
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.
148+
149+
To enable/disable auto-playing a video:
150+
151+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
152+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
153+
3. Enable the **Auto Play** property.
154+
155+
### Enable or Disable Looping of Video
156+
157+
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.
158+
159+
To enable/disable the looping of video:
160+
161+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
162+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
163+
3. Find the **Loop Video** property, enable or disable to change the looping video behavior.
164+
165+
### Show or Hide Video Controls
166+
167+
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.
168+
169+
To show/hide video controls:
170+
171+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
172+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
173+
3. Find the **Show Controls** property, Use it to show or hide controls over the video.
174+
175+
<div style={{
176+
position: 'relative',
177+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
178+
height: 0,
179+
width: '100%'}}>
180+
<iframe
181+
src="https://demo.arcade.software/sHKR3xUKXhi09D5rnypM?embed&show_copy_link=true"
182+
title=""
183+
style={{
184+
position: 'absolute',
185+
top: 0,
186+
left: 0,
187+
width: '100%',
188+
height: '100%',
189+
colorScheme: 'light'
190+
}}
191+
frameborder="0"
192+
loading="lazy"
193+
webkitAllowFullScreen
194+
mozAllowFullScreen
195+
allowFullScreen
196+
allow="clipboard-write">
197+
</iframe>
198+
</div>
199+
<p></p>
200+
201+
### Controlling Full Screen
202+
203+
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.
204+
205+
To enable/disable full-screen icon:
206+
207+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
208+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
209+
3. Find the **Allow Full Screen** property, checkmark/uncheck to show/hide the full-screen mode icon.
210+
211+
<div style={{
212+
position: 'relative',
213+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
214+
height: 0,
215+
width: '100%'}}>
216+
<iframe
217+
src="https://demo.arcade.software/HxVxSGkGKa6e6Wz2udiW?embed&show_copy_link=true"
218+
title=""
219+
style={{
220+
position: 'absolute',
221+
top: 0,
222+
left: 0,
223+
width: '100%',
224+
height: '100%',
225+
colorScheme: 'light'
226+
}}
227+
frameborder="0"
228+
loading="lazy"
229+
webkitAllowFullScreen
230+
mozAllowFullScreen
231+
allowFullScreen
232+
allow="clipboard-write">
233+
</iframe>
234+
</div>
235+
<p></p>
236+
237+
### Showing Playback Speed Menu
238+
239+
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.
240+
241+
To show the playback speed menu:
242+
243+
1. Select the **VideoPlayer** widget from the widget tree or from the canvas area.
244+
2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Video Player** section.
245+
3. Find the **Include Playback Speed Menu** property, checkmark it (click on it).
246+
247+
<div style={{
248+
position: 'relative',
249+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
250+
height: 0,
251+
width: '100%'}}>
252+
<iframe
253+
src="https://demo.arcade.software/3ahTxFfMNRog2PcMmejb?embed&show_copy_link=true"
254+
title=""
255+
style={{
256+
position: 'absolute',
257+
top: 0,
258+
left: 0,
259+
width: '100%',
260+
height: '100%',
261+
colorScheme: 'light'
262+
}}
263+
frameborder="0"
264+
loading="lazy"
265+
webkitAllowFullScreen
266+
mozAllowFullScreen
267+
allowFullScreen
268+
allow="clipboard-write">
269+
</iframe>
270+
</div>
271+
<p></p>

0 commit comments

Comments
 (0)