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

YOUTUBE API

Technologies used:

  1. Jquery
  2. 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

 

STEP2: RETRIEVING THE VIDEO ID FROM URL:

var url=document.getElementById("url").value;
var video_id = url.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1)
{
  video_id = video_id.substring(0, ampersandPosition);
}

STEP3:JSON RESPONSE FROM THE URL

Jquery ajax is used for making the ajax call.

var jqxhr = $.ajax( {url:"http://gdata.youtube.com/feeds/api/videos/"+video_id+"?v=2&alt=json",dataType:($.browser.msie) ? "text" : "json",contentType: "application/json" } )
.done(function(data) {

var published=data.entry.published.$t;
var updated=data.entry.updated.$t;
var title=data.entry.title.$t;
var link =data.entry.link[0].href;
var author=data.entry.author[0].name.$t;
var thumbnail1=data.entry.media$group.media$thumbnail[0].url;
var thumbnail2=data.entry.media$group.media$thumbnail[1].url;
document.getElementById("pd").innerHTML =published;
document.getElementById("ud").innerHTML =updated;
document.getElementById("title").innerHTML =title;
document.getElementById("link").innerHTML =link;
document.getElementById("author").innerHTML =author;
document.getElementById("video").innerHTML='<iframe id="ytplayer" type="text/html" width="550" height="250"src="https://www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen>';
var thumbnail="<img src='"+thumbnail1+"'/> ";//"+"<img src='"+thumbnail2+"'/>";
document.getElementById("tn").innerHTML =thumbnail;

})
.fail(function(data)
{
    alert("Failed");
})
.always(function() { });

 

STEP4:  TO RETRIEVE THE COMMENTS OF THE VIDEO:

For comments we need to request a diffrent url - http://gdata.youtube.com/feeds/api/videos/ video_id /comments?v=2&alt=json

$.getJSON("http://gdata.youtube.com/feeds/api/videos/" + video_id + "/comments?v=2&alt=json", function(data) {
                comments='<ol><li>' + data.feed.entry[0].content.$t + '<span>by ' + data.feed.entry[0].author[0].name.$t + '</span></li>';
                comments=comments+'<li>' + data.feed.entry[1].content.$t + '<span>by ' + data.feed.entry[1].author[0].name.$t + '</span></li></ol>';

                document.getElementById("comments").innerHTML=comments;
});

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

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.

0saves
contribute us by sharing this in your network

,

Ver peliculas online