Youtube API Tutorial Using Javascript

Some times in our projects we need to embed the youtube video along with its descriptions and thumbnails.Its is easy to embed a video using iframe.But when we need to access to some of the data’s of the video like comments of a particular url or video hits count, we need to use the youtube API.This post will give a short tutorial about youtube API.Using the youtube url of the video we could get the video id of a youtube video and using which we could get the detailed information about the video.

YOUTUBE API

Technologies used:

Jquery

youtube API

STEP1:UNDERSTANDING THE RESPONSE OBJECT FROM YOUTUBE:

url: http://gdata.youtube.com/feeds/api/videos/video_id?v=2&alt=json

Using the above url we could get the details from the youtube.Where video_id should replaced with the repective video id from the url.

The response can of json or xml .I am using json because of convenience.

In order to retrive the required data check out the tree structure of json response object – LINK

New to json objects? check out a short tutorial about it and then back to this tutorial – LINK

STEP5:EXTENDING ITS USAGE IN PRACTICAL APPLICATIONS :

When developing a social networking site like facebook, you could see the facebook extracts the video content of the youtube url.Similar effects could be done using this.May be my future post’s i will make a facebook like url fetching tutorial.In this way youtube’s API’s are used in many other places also.

FACEBOOK URL FETCHING

Not only this,youtube API can be used in other ways too.Though i am not going to breif it too much . Ill list the things that could be done using it.

Youtube player api is there for controling the youtube video controls. Using which actualy we could build a custom video player with the help of jquery.We call this chromeless player.

To Enable the JavaScript API for a chromeless player:

Use the following url – ”http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&version=3&playerapiid=ytplayer” to enable chromeless player

And then load the video using this syntax - loadVideoById(“video_id”, 5, “large”)

Youtube provides various functions to perform the video controlling options.

Functions

playVideo() - Plays the current video that is loaded previously.

pauseVideo() – Pauses the current video that is loaded .

stopVideo() -Stops the current video that is currently loaded.

seekTo(seconds:Number, allowSeekAhead:Boolean) - Seeks to a specified time in the video

nextVideo() – Plays the next video in the playlist

nextVideo() – Plays the previous video in the play list.

For more refecrence about this you could check this link for now. I will be back in another few days with my next about custom youtube video player tutorial where the style of the player is fully customizable. Subscribe our blog to get notified via mail.