Skip to main content

How to use Youtube Player in Kodular Creator?

 

How to use Youtube Player in Kodular Creator?

Welcome guys, today we are back again with our Today's tutorial on "How to use Youtube Player in Kodular Creator?". Now, let's directly start our tutorial without wasting any more time in Talking...


How to use Youtube Player in Kodular Creator?

1. What is Youtube Player?

Youtube Player is a component given in Kodular creator which we can implement in our app for free. This component enables us to play any video uploaded on youtube in our app.For playing any Video we only need the video ID of that youtube video which is found in the url of the video. This is like a video player in which we can play and control any youtube video without opening URL of video in Webview and which improve our app UI and UX.


2. Why Youtube Video Player?

We use Youtube video player because of many benefits some of them are described as below:

1. To show any tutorial for our app.
2. Can control our app better.
3. This is a UX improving Component.
4. No need to get specific server if we need to play any video.

and many more....

3. How to implement Youtube Player in Kodular Project?

Firstly you need to look for Youtube player under Google section in palette section.So click on google in palette and then get Youtube player.

Or

Click on search icon in palette and search for "youtube" and you will see Youtube Player. When you see Youtube player simply Drag and Drop this component to the position where you want to use it.

So, here you have completed your implementation of youtube player in your app.


4. Properties of Youtube Player:

1. Enable Live Video UI:
This checkbox is used to check whether we should enable UI for live videos in youtube player.

2.Width:
This is used to set width for Youtube Player which will then adjust height automatically.

3.Start Second:
This is used to set from where Video should be started.

4.Visible:
This is used to set Youtube Player Visible or invisible.

5.Volume: 
This is used to set the volume for the video which is being played in Youtube Player.

5. Blocks of Youtube Player:

Here Video ID is 12 digit ID in URL of Video,
Illustration,

Video Id

You have to enter this id of any Video wherever required.

1. Error

Youtube Player Blocks
When any error occur during playing any video then it returns Error in form of text.

2. Fullscreen

Youtube Player Blocks
Returns True or False according to player's State of Fullscreen.

3. Playback Quality Changed:

Youtube Player Blocks
This returns text for quality of video in form of text when changed.
Example: 'UNKNOWN', 'SMALL', 'MEDIUM', 'LARGE', 'HD720', 'HD1080', 'HIGH_RES' or 'DEFAULT'

4.Playback Speed:

Youtube Player Blocks
This gives us the Speed of Video in form of text when changed.
Example:'UNKNOWN', 'RATE_0_25', 'RATE_0_5', 'RATE_1', 'RATE_1_5' or 'RATE_2'.

5. State changed:

Youtube Player Blocks
This return us text for the state of Video player when State is changed.
Example:'UNKNOWN', 'UNSTARTED', 'ENDED', 'PLAYING', 'PAUSED', 'BUFFERING' or 'VIDEO_CUED'.

5. Enter Fullscreen:

Youtube Player Blocks
This is used to command Youtube Player to enter fullscreen.

6. Exit Fullscreen:

Youtube Player Blocks
This is used to command Youtube Player to exit fullscreen.

7. Instant Load:

Youtube Player Blocks
This is used to command Youtube Player to Instantly Load and Play Video automatically.

8. Load Video:

Youtube Player Blocks
This blocks command Youtube player to load video and show thumbnail until video is played.

9. Pause:

Youtube Player Blocks
This is used to command Youtube Player to Pause video.

10. Play:

Youtube Player Blocks
This is used to command Youtube Player to Pause video.

11.Seek to Position

Youtube Player Blocks
This is used to command Youtube Player to jump to specific time in video in seconds.

12. Get Thumbnail From video Id: 

Youtube Player Blocks
This returns image of thumbnail from video of given ID.

13. Toggle Fullscreen:

Youtube Player Blocks
This is used to command Youtube Player to toggle between fullscreen.

So this was all for our today's tutorial and we will be back tomorrow with a new informative Tutorial. Till then.......

Happy Koding.....

Comments

Post a Comment

Popular posts from this blog

How to use Utilities component in Kodular Creator?

  How to use Utilities component in Kodular Creator? Welcome back guys to Learn webs online. As you may have seen in above image, in today's tutorial we will be going to learn to use the utilities components in Kodular Creator. These components will surely be useful for your future projects. In today tutorial we will learn to use these four utilities components. These are the main utilities components in kodular creator. There are also another utilities components which we will learn to use in further tutorials. So, let's start our tutorial without waiting any more..... 1. Wallpaper component Introduction: This component can be found at the last position in the utilities components under utilities option in sidebar. As you can understand by it's name this is used to access the wallpaper settings of user's device. This is very useful component while developing a app in which we allow user to change or modify wallpaper within the application. This app may be a browser app
Post a Comment
Read more

How to use dynamic component in Kodular Creator ?

How to use dynamic components in Kodular Creator? Welcome back my dear friends, today we are back again with a complete new tutorial. Today we are going to learn How to use Dynamic components in Kodular Creator? As of all our tutorials I assure you you will find this tutorial very useful while developing any of you application which the no. of components are not fixed. So, we use dynamic components to add as much as number of components as we want. So, here we start our tutorial with some of FAQ's that will help you to learn what is concept of dynamic components if you didn't understood "What does dynamic components mean?"  FAQ's about Dynamic components 1. What are dynamic components? Dynamic components are the components which allows us to show as much as number of components in our application as we want. So, that we need not to update app to add any component in our application. This is useful when we are developing any application like Shopping application in
Post a Comment
Read more

How to use KIO4 gradient in Kodular?

  Welcome to learn web, today we are back with a completely new tutorial on Kodular Basic-to -Advanced app making.Today topic for our tutorial is that how to use Gradient effect in Kodular app making for any layout. How to use gradient colors in kodular app? For this you need to use a extension named "KIO4" gradient.So,before starting you need to get this extension before we start our tutorial.To get this click on link below: My Drive Link This is the google drive link for the KIO4 extension. I think you might have got the extension.So, we start our tutorial on how to use gradient effect Kodular apps. Step 1:Open your Project in which you want to use gradient Effect.Then click on the extensions button in the bottom of left sidebar and click on import extension.Now select the KIO4 gradient file and click on Import after some time your extension will be processed and imported to your project. Illustration: Once you have Imported the KIO4 extension you can see the extension as s
Post a Comment
Read more