Получение Youtube видео информации с помощью javascript/jquery
<script type= "text/javascript">
var url = "http://gdata.youtube.com/feeds/api/videos/VA770wpLX-Q?v=2&alt=json-in-script&callback=";
var title;
var description;
var viewcount;
var views;
var author;
$.getJSON(url,
function(data){
title = data.entry.title.$t;
description = data.entry.media$group.media$description.$t;
viewcount = data.entry.yt$statistics.viewCount;
views = numberFormat (viewcount);
author = data.entry.author[0].name.$t;
listInfo (title,description,author,views);
});
</script>
Итак, чтобы мой код получал информацию из одного видео, после получения информации он вызывает эту функцию для ее отображения:
<script type="text/javascript">
function listInfo (title,description,author,views) {
var html = ['<dl>'];
html.push('<dt>','<span class="titleStyle">', title,'</span><span class="descriptionStyle">',description, '</span><span class="authorStyle">',author,'</span><span class="viewsStyle">',' Views:',views,'</span></dt>');
html.push('</dl>');
document.getElementById("agenda").innerHTML = html.join("");
}
function numberFormat(nStr,prefix){
var prefix = prefix || '';
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1))
x1 = x1.replace(rgx, '$1' + ',' + '$2');
return prefix + x1 + x2;
}
</script>
После этого он помещает список определений в div, который у меня есть внутри таблицы
<table width="485"><tr><td><div id="agenda"></div></td></tr></table>
вся эта информация найдена в теле, я не могу заставить ее работать, я пробовал уже неделю, и я не могу найти способ заставить ее работать.
Ответы
Ответ 1
Поскольку API-интерфейс youtube не позволяет возвращать более 50 комментариев по одному запросу, вам нужно добавить параметр URL, называемый "start-index", который сообщает youtube, что вы хотите получать комментарии оттуда, Ниже приведен пример. Я сделал так, что пока ответ JSON возвращает 50 комментариев, он снова вызывает функцию для следующих 50 комментариев.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type= "text/javascript">
function getYouTubeInfo() {
$.ajax({
url: "http://gdata.youtube.com/feeds/api/videos/<?php echo $_GET['v']; ?>?v=2&alt=json",
dataType: "jsonp",
success: function (data) { parseresults(data); }
});
}
function parseresults(data) {
var title = data.entry.title.$t;
var description = data.entry.media$group.media$description.$t;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
$('#title').html(title);
$('#description').html('<b>Description</b>: ' + description);
$('#extrainfo').html('<b>Author</b>: ' + author + '<br/><b>Views</b>: ' + viewcount);
getComments(data.entry.gd$comments.gd$feedLink.href + '&max-results=50&alt=json', 1);
}
function getComments(commentsURL, startIndex) {
$.ajax({
url: commentsURL + '&start-index=' + startIndex,
dataType: "jsonp",
success: function (data) {
$.each(data.feed.entry, function(key, val) {
$('#comments').append('<br/>Author: ' + val.author[0].name.$t + ', Comment: ' + val.content.$t);
});
if ($(data.feed.entry).size() == 50) { getComments(commentsURL, startIndex + 50); }
}
});
}
$(document).ready(function () {
getYouTubeInfo();
});
</script>
<title>YouTube</title>
</head>
<body bgcolor="grey">
<div align="center">
<br/><br/>
<div id="title" style="color: #dddddd">Could not find a title</div><br/>
<iframe title="Youtube Video Player" width="640" height="390" src="http://www.youtube.com/embed/<?php echo $_GET['v']; ?>?fs=1&autoplay=1&loop=0" frameborder="0" allowfullscreen style="border: 1px solid black"></iframe>
<br/><br/>
<div id="description" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find a description</div>
<div id="extrainfo" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find extra information</div>
<div id="comments" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find comments</div>
</div>
</body>
</html>
Если у вас есть еще вопросы или вы застряли с этим кодом, не стесняйтесь спрашивать еще раз: -)
Удачи,
Том
Ответ 2
Вам следует попробовать jTube jquery youtube library. Это делает довольно простым сделать такие основные вызовы. Загрузите/просмотрите код по адресу: https://github.com/monkeecreate/jTube/blob/master/jTube/jquery.jTube.js
Используйте как:
$.jTube({
request: 'user',
requestValue: 'defvayne23',
requestOption: 'uploads',
success: function(videos){
...code here
}
});
Больше образцов: https://github.com/defvayne23/jTube
Ответ 3
Пока я не знаю, в чем проблема, с которой вы столкнулись, чтобы ответить на ваш вопрос о том, как получить информацию из видео с YouTube, я сделал быстрый пример ниже.
Наличие видеокода youtube получает переменную в php: $_GET ['v'].
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type= "text/javascript">
function getYouTubeInfo() {
$.ajax({
url: "http://gdata.youtube.com/feeds/api/videos/<?php echo $_GET['v']; ?>?v=2&alt=json",
dataType: "jsonp",
success: function (data) {parseresults(data)}
});
}
function parseresults(data) {
var title = data.entry.title.$t;
var description = data.entry.media$group.media$description.$t;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
$('#title').html(title);
$('#description').html('<b>Description</b>: ' + description);
$('#extrainfo').html('<b>Author</b>: ' + author + '<br/><b>Views</b>: ' + viewcount);
}
$(document).ready(function () {
getYouTubeInfo();
});
</script>
<title>YouTube</title>
</head>
<body bgcolor="grey">
<div align="center">
<br/><br/>
<div id="title" style="color: #dddddd">Could not find a title</div><br/>
<iframe title="Youtube Video Player" width="640" height="390" src="http://www.youtube.com/embed/<?php echo $_GET['v']; ?>?fs=1&autoplay=1&loop=0" frameborder="0" allowfullscreen style="border: 1px solid black"></iframe>
<br/><br/>
<div id="description" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find a description</div>
<div id="extrainfo" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find extra information</div>
</div>
</body>
</html>
Это печатает заголовок выше встроенного видео (iframe) и описание, представления и автора внизу.
Я не знаю, что еще вы хотите сделать (listinfo, numberformat), но я бы предположил, что вы можете это исправить здесь.
Надеюсь, что это поможет.
Tom