Как получить и отобразить список видео YouTube, используя JavaScript - PullRequest
4 голосов
/ 18 ноября 2010

Я написал код C для получения списка видео YouTube для URL "*http://gdata.youtube.com/feeds/api/standardfeeds/top_rated*" с помощью библиотеки libsoup. Я могу проанализировать возвращенные данные XML с помощью libxml2 и извлечь из него нужные поля.

Я хочу знать, как я могу сделать то же самое, используя javascript и отображать список в браузере. У меня есть базовые знания по javascript, но я готов приложить необходимые усилия, если вы, ребята, укажете мне правильное направление.

Я понимаю следующее из справочной документации Google для API YouTube.

  1. Отправьте запрос GET в нужном формате на упоминание URL.
  2. Ответ будет xml илиФормат json-c, и его необходимо проанализировать

Как мне добиться того и другого с помощью javascript и отображать с помощью html / javascript? Пример кода или любые ссылки будут очень полезны.1015 * Редактирование: добавление тега php для лучшей наглядности вопроса, и я думаю, что php может предоставить подсказки для вопроса.

TIA,

Правeen S

РЕДАКТИРОВАТЬ, попробовав следующие предложения:

Как мне отладить это?Кажется, он не отображает название видео, которые я собираюсь записать.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
    $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=function&alt=jsonc&v=2", function(data) {
        var dataContainer = $("#data ul");
        $.each(data.data.items, function(i, val) {
         $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>");
        }
        });
        });


  });
});
</script>
</head>

<body>
<h2>Header</h2>
<p>Paragrapgh</p>
<p>Paragraph.</p>
<button>Click me</button>
</body>
</html> 

Ответы [ 3 ]

4 голосов
/ 18 ноября 2010

Итак, я разработал что-то базовое, используя jQuery, фреймворк javascript, который выполняет GET-запрос к этому URL и извлекает данные в формате jsonp. Затем анализирует некоторую базовую информацию (заголовок и ссылку) о каждой записи и добавляет ее в неупорядоченный список в элементе div с идентификатором data, пока биты данных не являются неопределенными для этой записи. Это работает, если вы вставляете его в тег script с загруженным на страницу jQuery и запускаете его. Я не буду вдаваться во все детали того, как это работает, потому что вы сказали, что готовы приложить некоторые усилия. Но я начну с некоторых ссылок и основных объяснений.

В этом примере используется:

  1. Концепция AJAX , или Асинхронный Javascript и XML. Группа технологий, используемых для создания интерактивных веб-приложений. В нашем примере, в частности, XMLHttpRequest , для которого jQuery jQuery.ajax является оболочкой. jQuery.getJSON - это оболочка для jQuery.ajax, специально предназначенная для извлечения данных в формате JSON или JSONP.
  2. Концепция JSON , или Javascript Object Notation, облегченный формат обмена данными. Вы можете думать об этом как об альтернативе XML без жира.
  3. Концепция JSONP или JSON с отступом. JSONP не ограничен той же политикой происхождения, что и обычные запросы AJAX.
  4. jQuery javascript framework , превосходный javascript-фреймворк для dom-манипуляций и ajax-запросов, и почти все остальное полезное.
  5. Метод jQuery.getJSON() из jQuery, который используется для извлечения данных json или jsonp, например, в этом примере
  6. Метод jQuery.each() из jQuery, который можно использовать для перебора любой общей коллекции, в данном случае json.
  7. Метод .append() из jQuery, который используется для добавления контента к элементам dom.
  8. Концепция селекторов jQuery , которые на самом деле являются просто селекторами css с несколькими дополнительными прибамбасами. jQuery использует селекторы для быстрого «выбора» элементов dom для работы с ними.

Без дополнительной информации:

Пример


     $("body").append("<div id = 'data'><ul></ul></div>");
     $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=?&alt=jsonc&v=2", function(data) {
        var dataContainer = $("#data ul");
        $.each(data.data.items, function(i, val) {
            if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
                dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>");
        }
        });
    });

Этого должно быть достаточно, чтобы вы указали в правильном направлении. Если у вас есть какие-либо вопросы, оставьте комментарий, и я сделаю все возможное, чтобы ответить на них.

2 голосов
/ 18 ноября 2010

Да, вы можете ^^

API-интерфейс youtube также предоставляет jsonp, который возвращает данные в виде JS-команды.
Посмотрите это (и посмотрите параметры внутри URL):
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=json&callback=someFunction

С jsonp у вас нет никаких одних и тех же OriginPolicies-ограничений, хотя он не работает с AJAX.

Было бы легко использовать библиотеку, подобную jQuery.

Если вы не хотите использовать jQuery или что-то подобное, вы должны внедрить * DOM-элемент <script> в DOM с URL-адресом в качестве src-атрибута и создать функцию (используя вышеуказанный URL-адрес должен быть назван "someFunction "), которая работает с данными.

1 голос
/ 18 ноября 2010

API YouTube поддерживает JSONP (нотация объектов JavaScript с отступами). JSONP позволяет вам делать запросы внешнего сайта для получения данных. Но вам не нужно знать все это. Основная идея заключается в том, что вы вводите тег script с запросом в качестве атрибута src.

Но в настоящее время вам не нужно этого делать, если только вы не хотите изучать сложный Javascript. Код полностью написан для вас в великолепных библиотеках Javascript. Я рекомендую вам использовать jQuery для выполнения запроса JSONP. jQuery - это простая библиотека, которую можно использовать, добавив одну строку кода в ваш HTML-документ.

Как только вы запустите jQuery, вы можете использовать команду getJSON для разбора данных JSONP. В этот момент вы получите объект со всеми необходимыми данными и сможете выбрать способ вывода данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...