jquery - Get video duration with YouTube Data API? -

basically, i'm trying video duration of each video shows in results when search. have neat little demo set mess with!

also - when duration mean length of video in m/s format (0:00)..

demo http://codepen.io/mistkaes/pen/6b6a347c7d24edee15b3491420db4ecd

jquery:

var apikey = '<api key>';  $(function() {     var searchfield = $('#search-input');      $('#search-form').submit(function(e) {         e.preventdefault();     }); });  function search() {     $('#results').html('');      q = $('#search-input').val();      $.get(         "https://www.googleapis.com/youtube/v3/search", {             part: 'snippet, id',             q: q,             maxresults: 50,             type: 'video',             key: apikey         },         function(data) {             $.each(data.items, function(i, item) {                 var output = getresults(item);                  $('#results').append(output);             });         }); }  function getresults(item) {     var videoid = item.id.videoid;     var title = item.snippet.title;     var thumb = item.snippet.thumbnails.high.url;     var channeltitle = item.snippet.channeltitle;      var output = '<li>' +         '<div class="list-left">' +         '<img src="' + thumb + '">' +         '</div>' +         '<div class="list-right">' +         '<h3><a href="http://youtube.com/embed/' + videoid + '?rel=0">' + title + '</a></h3>' +         '<p class="ctitle">' + channeltitle + '</p>' +         '</div>' +         '</li>' +         '<div class="clearfix"></div>' +         '';      return output; } 

i searched query , found there's issue search api.

the alternative make call youtube data api's video resource after make search call. can put 50 video id's in search, won't have call each element

i updated codepen , done following:

1) url of each video got search.

2) send ajax call duration:-

for (var = 0; < data.items.length; i++) {     var url1 = "https://www.googleapis.com/youtube/v3/videos?id=" + data.items[i].id.videoid + "&key=aizasydywpzlevxaui-ktsvxtlrolyheonuf9rw&part=snippet,contentdetails";     $.ajax({         async: false,         type: 'get',         url: url1,         success: function(data) {             if (data.items.length > 0) {                 var output = getresults(data.items[0]);                 $('#results').append(output);             }         }     }); } 

3) api give time in iso format converted mm:ss format (as wanted).

function convert_time(duration) {     var = duration.match(/\d+/g);      if (duration.indexof('m') >= 0 && duration.indexof('h') == -1 && duration.indexof('s') == -1) {         = [0, a[0], 0];     }      if (duration.indexof('h') >= 0 && duration.indexof('m') == -1) {         = [a[0], 0, a[1]];     }     if (duration.indexof('h') >= 0 && duration.indexof('m') == -1 && duration.indexof('s') == -1) {         = [a[0], 0, 0];     }      duration = 0;      if (a.length == 3) {         duration = duration + parseint(a[0]) * 3600;         duration = duration + parseint(a[1]) * 60;         duration = duration + parseint(a[2]);     }      if (a.length == 2) {         duration = duration + parseint(a[0]) * 60;         duration = duration + parseint(a[1]);     }      if (a.length == 1) {         duration = duration + parseint(a[0]);     }     var h = math.floor(duration / 3600);     var m = math.floor(duration % 3600 / 60);     var s = math.floor(duration % 3600 % 60);     return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s); } 

4) append result title of video.

'<p class="ctitle">' + channeltitle + '  --->' + duration + '</p>'