Получить название видео YouTube с JQuery с помощью API YouTube - PullRequest
Новая
       12

Получить название видео YouTube с JQuery с помощью API YouTube

15 голосов
/ 19 марта 2010

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

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

Спасибо!

Ответы [ 4 ]

15 голосов
/ 19 марта 2010

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

например. URL:

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

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

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

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

7 голосов
/ 27 августа 2016

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

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

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

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

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;
}

Совет по отладке: Вы можете использовать инструменты разработчика для просмотра сетевых запросов (например, Инструменты разработчика Chrome или Firefox Firebug ), чтобы убедиться, что ваши запросы / ответы вернитесь правильно и затем используйте console.log () для регистрации возвращенных данных, чтобы убедиться, что вы правильно проанализировали ответ.

Дополнительное чтение: API данных YouTube "начало работы"

4 голосов
/ 19 марта 2010

Попробуйте это: 

<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>
0 голосов
/ 05 мая 2013

Попробуйте это для показа изображения функции 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...