Basically, I'm trying to get the video duration of each video that shows up in the results when they search. I have a neat little demo set up for you to mess with!
ALSO - When I say duration I mean the length of the 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;
}
php function getDuration($videoID){ $apikey = "YOUR-Youtube-API-KEY"; // Like this AIcvSyBsLA8znZn-i-aPLWFrsPOlWMkEyVaXAcv $dur = file_get_contents("https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=$videoID&key=$apikey"); $VidDuration =json_decode($dur, true); foreach ($VidDuration['items'] as $ ...
You can retrieve entire playlists, users' uploads, and even search results using the YouTube API. You can also add YouTube functionalities to your website so that users can upload videos and manage channel subscriptions straight from your website or app.
php function getDuration($url){ parse_str(parse_url($url,PHP_URL_QUERY),$arr); $video_id=$arr['v']; $data=@file_get_contents('http://gdata.youtube.com/feeds/api/videos/'.$video_id.'?v=2&alt=jsonc'); if (false===$data) return false; $obj=json_decode($data); return $obj->data->duration; } echo getDuration('http://www. ...
I searched your query and found there's an issue with the search api.
The alternative is to make a call to the Youtube Data API's Video resource after you make the search call. You can put up to 50 video id's in search, so you won't have to call it for each element
I updated your codepen and what I done was the following:
1) Get Url of each video that you got from search.
2) Send an another Ajax call to get duration:-
for (var i = 0; i < 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) The API give time in ISO format so I converted it into mm:ss
format (as you wanted).
function convert_time(duration) {
var a = duration.match(/\d+/g);
if (duration.indexOf('M') >= 0 && duration.indexOf('H') == -1 && duration.indexOf('S') == -1) {
a = [0, a[0], 0];
}
if (duration.indexOf('H') >= 0 && duration.indexOf('M') == -1) {
a = [a[0], 0, a[1]];
}
if (duration.indexOf('H') >= 0 && duration.indexOf('M') == -1 && duration.indexOf('S') == -1) {
a = [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 your result with title of your video.
'<p class="cTitle">' + channelTitle + ' --->' + duration + '</p>'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With