Получите видеоролик youtube с помощью jQuery с помощью youtube api

Каков самый простой способ получить название из видео youtybe, например, это название видео:

http://www.youtube.com/watch?v=Wp7B81Kx66o

Спасибо!

Ответ 1

Используйте jQuery JSON, чтобы обратиться к API YouTube, чтобы вернуть результаты, а затем использовать jQuery для размещения результатов, где вы хотите. Вы можете использовать вкладку firebug NET, чтобы убедиться, что запросы/ответчики вернулись правильно, а затем используйте console.log(), чтобы убедиться, что вы правильно разобрали ответ.

например. URL:

GET https://gdata.youtube.com/feeds/api/videos/(the-video-id)?v=2&alt=json

Дополнительная информация:

API YouTube для определенного видео

Руководство для разработчиков: JSON/JavaScript

Ответ 2

Попробуйте следующее:

<script type="text/javascript">
function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul>'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    html.push('<li>', title, '</li>');
  }
  html.push('</ul>');
  document.getElementById('videos').innerHTML = html.join('');
}
</script>

и это в вашей части тела:

<body>
<div id="videos">
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&format=5&callback=showMyVideos">
</script>
</div>
</body>

Ответ 3

Это переработанная реализация исходного ответа, предоставленного @easement, с использованием текущего v3 API данных YouTube.

Чтобы сделать запрос к API, вы можете использовать jQuery getJSON() для вызова, чтобы запросить название с YouTube через AJAX. API v3 данных YouTube v3 предоставляет три конечных точки, которые можно использовать для получения заголовка:

Название фрагмента - название видео. Значение свойства имеет максимальную длину 100 символов и может содержать все допустимые символы UTF-8, кроме < и > .
Локализованное название фрагмента - название локализованного видео, опять же с максимальной длиной, описанной выше
Полное локализованное название - Полноразмерный локализованный заголовок видео.

Пример реализации с использованием названия фрагмента

var yt_api_key = {your YouTube api key},
  yt_video_id = {your YouTube video id},
  yt_snippet_endpoint = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + yt_video_id + "&key=" + yt_api_key;

var jqxhr = $.getJSON(yt_snippet_endpoint)
  .done(function(data) {
    console.log("second success callback");
    var title = getTitle(data);
    // do something with title here
  })
  .fail(function() {
    console.log("error, see network tab for response details");
  });

function getTitle(snippet_json_data){
  var title = snippet_json_data.title;
  return title;
}

Ответ 4

Попробуйте это для показа изображения Youtube перед представлением списка JQuery.

<script>
function showMyVideos(data) {
    var feed = data.feed;
    var entries = feed.entry || [];
    var html = ['<ul data-role="listview">'];
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var title = entry.title.$t;
        var feature = entry.content.$t.substring(entry.content.$t.indexOf("src=")+5);
        feature = feature.substring(0,feature.indexOf('"'));
        html.push('<li><img src="' ,feature , '" />' , title , '<p>' , feature, '</p></li>');
    }
    html.push('</ul>');
    document.getElementById('videos').innerHTML = html.join('');
}
</script>

<div id="videos">
<script 
 src="http://gdata.youtube.com/feeds/users/mostviewcomedy/uploads?alt=json-in-script&format=5&callback=showMyVideos">
</script>
</div>