PHP Lang
  1. PHP Lang
  3. Как получить и отобразить список видео с YouTube, используя javascript
Intereting Posts
Ошибка 324 (net :: ERR_EMPTY_RESPONSE): я не могу получить свой сайт с некоторых компьютеров PHPExcel, как применить выравнивание для всего документа, созданного из таблицы mysql laravel 5.4: Laravelcollective / html v5.3.0 требует подсветки / просмотра 5.3. * Показать видео и миниатюры Youtube в правильном формате 9:16 SQL Select Присоединиться к лимиту в Laravel / PHP phpmailer не отправляет почту в gmail, yahoo, hotmail или блокирует электронную почту, отправленную phpmailer SQL: mysqli_query, нет вывода Как получить текущий зарегистрированный пользователь, используя WordPress Rest Api? php-переменная в html нет другого пути: <? php echo $ var; ?> Веб-приложение GWT пытается получить json из PHP Уведомление Apple Push с отправкой пользовательских данных Многостраничный сайт WordPress (включен сетевой режим) Обнаружение имен параметров в php-функции для короткого кода WordPress? Помните, что флажки отмечены на разных страницах – какой лучший способ? Получите uniq случайные строки из файла и напишите их в другой файл, используя php

Как получить и отобразить список видео с YouTube, используя javascript

Я написал код 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? Пример кода или любых ссылок будет очень полезен.

Изменить: добавление тега php для лучшей видимости вопроса, и я думаю, что php может предоставить подсказки для вопроса.

ТИА,

Praveen S

EDIT после того, как вы попробуете приведенные ниже предложения:

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

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

Ну, я взломал что-то основное, используя jQuery, фреймворк javascript, который делает запрос GET на этот url и извлекает данные в формате jsonp. Затем анализирует некоторую базовую информацию (заголовок и ссылку) о каждой записи и добавляет ее в неупорядоченный список в div с идентификатором data , если биты данных не определены для этой записи. Это работает, если вы вставьте его в тег скрипта с загруженным на страницу 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>"); } }); });

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

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

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

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

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

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

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

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

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