Android-app-using-Kotlin/C3/Playing-video-using-YouTube-API/English-timed
From Script | Spoken-Tutorial
| |
|
| 00:01 | Welcome to the Spoken Tutorial on Playing video using YouTube API. |
| 00:07 | In this tutorial we will learn to
Create a project in Google cloud |
| 00:13 | Enable the YouTube API |
| 00:16 | Initialise the YouTubePlayerView in Android studio |
| 00:21 | Run the Kotlin App and Play the selected video |
| 00:27 | To record this tutorial, I am using
Ubuntu Linux 16.04 operating system |
| 00:34 | Android Studio version 3.x and |
| 00:38 | Android Phone with minimum of Android OS version 4.03 |
| 00:45 | To follow this tutorial, you should have basic knowledge of
Java programming language and Android Studio |
| 00:55 | If not, then go through the relevant tutorials on this website. |
| 01:00 | First let us create a project in Google cloud. |
| 01:05 | Open a web browser and go to the website cloud dot google dot com as shown here. |
| 01:13 | Click Console at the top right corner of the window. |
| 01:17 | Maximise the window if you don’t see the Console option. |
| 01:22 | Accept the terms and conditions of the Google Cloud platform. |
| 01:27 | Then sign in or login with your google credentials.
I have logged in already. |
| 01:35 | A dashboard opens. |
| 01:38 | Now we will create a new project to mention the APIs that we will use in the Android app. |
| 01:46 | In the top menu bar, click on Select a project drop-down box. |
| 01:52 | Create a new project by clicking on NEW PROJECT button at the top right of the dialog box. |
| 02:00 | In the next screen, type the name of the project as MyKotlinProject. |
| 02:06 | Then click on Create button at the bottom of the scree. |
| 02:11 | Then go to Select a project dropdown box. |
| 02:16 | Click on MyKotlinProject that is created just now. |
| 02:21 | The project dashboard is displayed with the project name MyKotlinProject. |
| 02:27 | Now we will enable the YouTube API in this project. |
| 02:32 | Open the navigation menu at the top left corner. |
| 02:36 | Click APIs & Services then dashboard |
| 02:41 | A new dashboard of APIs & Services appears. |
| 02:47 | Click Enable Apis and services at the top middle of the window. |
| 02:52 | In the search box, type youtube. |
| 02:57 | Select YouTube Data API v3. |
| 03:02 | Click on the ENABLE button. |
| 03:05 | After few seconds the API will be enabled. |
| 03:09 | Now select Credentials in the left sidebar or click on Create Credentials button. |
| 03:17 | This will create new credentials. |
| 03:20 | Let us click on Create Credentials drop-down and select API Key. |
| 03:27 | API Key is generated and shown under Your API Key. |
| 03:32 | Copy that key and save it in a text editor for future use. |
| 03:37 | Then click on the 'Close button in the dialog box. |
| 03:42 | We will use this key in our app’s Kotlin code to load the YouTube video. |
| 03:48 | In Android Studio, we don’t have any tool in the palette which can play YouTube videos. |
| 03:55 | But YouTube provides its own YouTubePlayerView which we can use. |
| 04:01 | The view just needs to be initialized directly to play a video from YouTube, by giving the video ID. |
| 04:09 | Open the web browser. |
| 04:12 | Now let’s download the required file from the developer website. |
| 04:17 | Go to this website. |
| 04:20 | A download option is provided under Download link column. |
| 04:25 | Click on Download and then click on SaveFile option and click on Ok button. |
| 04:33 | A zip file gets downloaded. Extract the zip file. |
| 04:40 | From the extracted folder, open libs folder. |
| 04:45 | This folder contains YouTubeAndroidPlayerApi dot jar file which we can use to play YouTube videos. |
| 04:54 | We need to copy this file in our Android Studio project.
So, right-click and select copy. |
| 05:02 | Let us open Android Studio. |
| 05:04 | Open the project ST Search. |
| 05:10 | Once the project is completely loaded go to the left panel and select Project tab. |
| 05:17 | Right-click on the app folder and select Show in Files. |
| 05:23 | The File Explorer opens showing the project folder. |
| 05:28 | Open libs folder. |
| 05:31 | Right-click and select paste to copy the YouTubeAndroidPlayerApi dot jar file into libs folder.
Close the window. |
| 05:43 | In the left panel, under Project, go to Gradle Scripts. |
| 05:47 | Double-click on build dot gradle within brackets Module colon app |
| 05:55 | In the dependencies block {} we will add a new dependency. |
| 05:59 | At the end of the block add a new line as shown here. |
| 06:04 | A Sync Now message appears at the top right corner.
Click on it. |
| 06:10 | Wait for the gradle build to complete. |
| 06:13 | Now we will edit the layout file for third activity. |
| 06:18 | Go to activity underscore third dot xml |
| 06:23 | Here we will display the YouTube video. |
| 06:27 | At the bottom of activity underscore third dot xml, click on Text mode. |
| 06:34 | Now we will write our own code for YouTube player. |
| 06:39 | Between the tags of ConstraintLayout type the below code. |
| 06:44 | Now again go back to Design mode by clicking on the Design button at the bottom. |
| 06:51 | We can see a view with the name “com dot google YouTubePlayerView” with a grey colored background. |
| 06:59 | Now we shall set its constraints. |
| 07:03 | First hold and drag the YouTubePlayerView box little lower. |
| 07:09 | Now we can clearly see the constraint circles. |
| 07:13 | Join the top, left and right circles to the boundaries as shown here |
| 07:19 | Go to Attribute window and type the ID attribute as youtube underscore playerview. |
| 07:27 | Change the layout height attribute of YouTubePlayerView to wrap content. |
| 07:34 | Now let’s place a TextView below this to display the video title. |
| 07:39 | Drag a TextView and drop it in the layout. |
| 07:43 | Set the top constraint below the YouTube player view. |
| 07:47 | Set the left constraint to left boundary. |
| 07:51 | Change the ID attribute of the TextView to youtube underscore title |
| 07:57 | Next we will write the code to play the video.
Go to ThirdActivity dot kt |
| 08:05 | To show YouTube video, our class should extend YouTubeBaseActivity. |
| 08:11 | Change the class declaration code as shown. |
| 08:15 | Now we will add code in our onCreate method. |
| 08:20 | So first we’ll create a variable to store the API key that we got from Google Cloud Console. |
| 08:28 | So declare the variable below the toast command as shown: |
| 08:33 | In the place of “YOUR KEY HERE” paste the API key which was saved in the text editor. |
| 08:42 | Now we will set the text of our youtube underscore title. |
| 08:47 | Type the code as shown. |
| 08:50 | Next, we’ll make an object for YouTube player view. |
| 08:56 | So, type this code as shown here |
| 09:00 | Next, We will then initialize the playerView. |
| 09:04 | For that, type the code as shown. |
| 09:08 | The code will initialize the YouTube player with the selectedVideoID using cueVideo method. |
| 09:16 | If it fails, it will show an error message as toast. |
| 09:21 | We have typed all the necessary code. |
| 09:24 | Now let us run the App. |
| 0:27 | Select the Foss and Language and click on the Search button. |
| 09:33 | We can see that the video thumbnails get loaded. |
| 09:37 | Click on any one.
The video plays in a new screen. |
| 09:44 | Go back and click any other video thumbnail. |
| 09:48 | Once again, the video plays in a new screen. |
| 09:53 | Spoken Tutorial’s ST search app is now ready to launch. |
| 09:58 | Please follow the steps in the given link to become a publisher. |
| 10:03 | This is the official link where the registration is to be done |
| 10:07 | Once completed, you will be able to publish or upload your Android App on Google Play Store. |
| 10:15 | This brings us to the end of this tutorial. Let us summarize. |
| 10:20 | In this tutorial we learnt to
Create a project in Google cloud |
| 10:26 | Enable the YouTube API |
| 10:29 | Initialise the YouTubePlayerView in Android studio |
| 10:34 | Run the Kotlin App and Play the selected video |
| 10:39 | As an assignment Select different FOSS and Language combinations and play the selected video |
| 10:46 | The video at the following link summarises the Spoken Tutorial project.
Please download and watch it |
| 10:54 | The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online tests.
For more details, please write to us. |
| 11:05 | Please post your timed queries in this forum. |
| 11:09 | Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at this link. |
| 11:22 | The Android app and the script for this tutorial was contributed by Abhishek Shah. |
| 11:28 | And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.
Thanks for watching. |
