Разбор надоедливых XML-каналов API Youtube с помощью jQuery

Я учусь использовать внешние XML-каналы в нашей внутренней сети, чтобы лучше обслуживать наших сотрудников и уменьшать их потребность выходить за пределы сети для получения контента.

Я без проблем могу отобразить основную информацию из фида. Где я не застрял, пытаясь отобразить одну из миниатюр видео, чтобы использовать ее как часть выбранного макета.

Проблема

Я пытаюсь получить значение свойства URL из первого элемента media:thumbnail для использования в теге img, но что бы я ни пытался, я не могу отобразить его содержимое.

Eg; <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/default.jpg'... />

Фрагмент текста, который я хотел бы извлечь и использовать из приведенного выше примера, это http://i.ytimg.com/vi/CQP_AuT4zXQ/default.jpg.

Я подозреваю, что почему я не могу проанализировать значение этого элемента, имеет какое-то отношение к имени элемента, имеющему в нем разделитель точки (:), и/или мои развивающиеся знания jQuery подозревают, что я не звоню или не пытаюсь правильно разобрать этот элемент или его часть.

Я также хотел бы отобразить значение media:keywords, которое было бы решено путем понимания той же проблемы.

Код, используемый для отображения XML

<script type="text/javascript">
/* learned from http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery */
/* this can be used to parse any file in an XML format */
$(document).ready(function()
{
/*
perform an asynchronous ajax request using the relevant variables
Documentation: http://api.jquery.com/jQuery.ajax/
*/
  $.ajax({
    type: "GET",
    /* define url of xml file to parse */
    url: "/pr/rss_repository/youtube.xml",
    /* assign it a data type */
    dataType: "xml",
    /* state name of function to run if file is successfully parsed */
    success: parseXml
  });
});
function parseXml(xml)
/* this is where the xml file is parsed and converted into a HTML output */
{

  //for each item node in the xml file
  $(xml).find("item").each(function()
  {
  //print the following html, inserting the relevant data within the nodes of item
    //this is the heading
    $("#output").append("<h2><a href=\"" + $(this).find("link").text() + "\" target=\"_blank\"> " + $(this).find("title").text() + "</a></h2>\n");
//this is a new paragraph with the publication date
    $("#output").append("<p>" + $(this).find("pubDate").text() + "</p>\n");
//this is the description text of the item
$("#output").append("<p>" + $(this).find("description").text() + "</p>\n");
$("#output").append("<p><img src=\"" + $(this).find("media:thumbnail").text() + "\"></p>\n");
  });
 //end for each
//end function
}
</script>

Результирующий HTML

<h2><a href="http://www.youtube.com/watch?v=CQP_AuT4zXQ&amp;feature=youtube_gdata" target="_blank"> IFA World Forestry Day 2010 forum - Bob Pearce, FIFWA (Part 1)</a></h2>
<p>Thu, 01 Apr 2010 06:44:19 +0000</p>
<p>Bob Pearce, Executive Director - Forest Industries Federation of Western Australia delivers a presentation on the impact of timber harvesting in healthy forests at the Institute of Foresters of Australia 2010 World Forestry Day forum.</p>
<p><img src=""></p>
...

Образец анализируемого XML-файла с Youtube

Файл захватывается и переносится на наши серверы здесь, чтобы сохранить файл, загружаемый каждый раз, когда он вызывается. Мы загружаем его в сеть с помощью VBScript, который выгружает содержимое, возвращенное с запрошенного URL-адреса.

Пример данных из http://gdata.youtube.com/feeds/api/videos?alt=rss&author=fpcwa:

<?xml version='1.0' encoding='UTF-8'?>
<rss xmlns:atom='http://www.w3.org/2005/Atom' xmlns:media='http://search.yahoo.com/mrss/' xmlns:openSearch='http://a9.com/-/spec/opensearch/1.1/' xmlns:gd='http://schemas.google.com/g/2005' xmlns:gml='http://www.opengis.net/gml' xmlns:yt='http://gdata.youtube.com/schemas/2007' xmlns:georss='http://www.georss.org/georss' version='2.0'>
  <channel>
    ... standard channel description
    <item>
      <guid isPermaLink='false'>tag:youtube.com,2008:video:CQP_AuT4zXQ</guid>
      <pubDate>Thu, 01 Apr 2010 06:44:19 +0000</pubDate>
      <atom:updated>2010-04-29T00:03:31.000Z</atom:updated>
      <category domain='http://schemas.google.com/g/2005#kind'>http://gdata.youtube.com/schemas/2007#video</category>
      <category domain='http://gdata.youtube.com/schemas/2007/categories.cat'>News</category>
      <category domain='http://gdata.youtube.com/schemas/2007/keywords.cat'>ifa</category>
      ... remaining categories
      <title>IFA World Forestry Day 2010 forum - Bob Pearce, FIFWA (Part 1)</title>
      <link>http://www.youtube.com/watch?v=CQP_AuT4zXQ&feature=youtube_gdata</link>
      <author>fpcwa</author>
      <yt:accessControl action='comment' permission='allowed'/>
      ...
      <gd:comments>
        <gd:feedLink href='http://gdata.youtube.com/feeds/api/videos/CQP_AuT4zXQ/comments?client=ytapi-google-jsdemo' countHint='0'/>
      </gd:comments>
      <media:group>
        <media:category label='News & Politics' scheme='http://gdata.youtube.com/schemas/2007/categories.cat'>News</media:category>
        <media:content url='http://www.youtube.com/v/CQP_AuT4zXQ?f=videos&c=ytapi-google-jsdemo&app=youtube_gdata' type='application/x-shockwave-flash' medium='video' isDefault='true' expression='full' duration='587' yt:format='5'/>
        <media:content url='rtsp://v1.cache6.c.youtube.com/CjcLENy73wIaLgl0zfjkAv8DCRMYDSANFEITeXRhcGktZ29vZ2xlLWpzZGVtb0gGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='587' yt:format='1'/>
        <media:content url='rtsp://v2.cache3.c.youtube.com/CjcLENy73wIaLgl0zfjkAv8DCRMYESARFEITeXRhcGktZ29vZ2xlLWpzZGVtb0gGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='587' yt:format='6'/>
        <media:credit role='uploader' scheme='urn:youtube'>fpcwa</media:credit>
        <media:description type='plain'>Bob Pearce, Executive Director - Forest Industries Federation of Western Australia delivers a presentation on the impact of timber harvesting in healthy forests at the Institute of Foresters of Australia 2010 World Forestry Day forum.</media:description>
        <media:keywords>ifa, institute of foresters, australia, forestry, world forestry day, 2010, forum, healthy forests, forest, forests, bob pearce, fifwa</media:keywords>
        <media:player url='http://www.youtube.com/watch?v=CQP_AuT4zXQ&feature=youtube_gdata'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/default.jpg' height='90' width='120' time='00:04:53.500'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/2.jpg' height='90' width='120' time='00:04:53.500'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/1.jpg' height='90' width='120' time='00:02:26.750'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/3.jpg' height='90' width='120' time='00:07:20.250'/>
        <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/hqdefault.jpg' height='360' width='480'/>
        <media:title type='plain'>IFA World Forestry Day 2010 forum - Bob Pearce, FIFWA (Part 1)</media:title>
        <yt:aspectRatio>widescreen</yt:aspectRatio>
        <yt:duration seconds='587'/>
        <yt:uploaded>2010-04-01T06:44:19.000Z</yt:uploaded>
        <yt:videoid>CQP_AuT4zXQ</yt:videoid>
      </media:group>
      <yt:statistics favoriteCount='0' viewCount='10'/>
    </item>

person thewinchester    schedule 02.07.2010    source источник
comment
Просто любопытно, а не использовать ли JSON-версию YouTube API? быть намного проще? :)   -  person Nick Craver    schedule 02.07.2010
comment
Мне пришла в голову мысль, я сейчас экспериментирую с обоими для этих задач. Одним из больших недостатков для меня с JSON является невозможность прочитать набор данных JSON из-за того, что все данные находятся в одной строке.   -  person thewinchester    schedule 02.07.2010
comment
Просто измените dataType: xml на dataType: json, и вы получите красивый объект.   -  person levhita    schedule 29.02.2012
comment
не по теме, но вы можете использовать jsbeautiflier, чтобы сделать его красивым.   -  person Darshan Thanki    schedule 28.11.2012


Ответы (2)


Это ошибка в jQuery, где он не поддерживает обработку пространств имен XML. Вы можете использовать один из следующих двух подходов:

.find("[nodeName=media:thumbnail]")
.find("media\\:thumbnail]")

Большинство людей рекомендуют первый, так как второй не работает в некоторых версиях WebKit.

Если вам нужны дополнительные сведения или другие альтернативы, выполните поиск по запросу "jquery find namespace" в Интернете.

Обновление. Чтобы получить значение атрибута ulr на узле media:thumbnail, используйте следующее:

.attr("url")
person Franci Penov    schedule 02.07.2010
comment
Спасибо за быстрый ответ - ставит меня на правильный путь, однако он также подчеркивает ошибку в моем первоначальном вопросе (обновлено, чтобы отразить это). Часть media:thumbnail, которую я пытаюсь получить, содержится не в обычном <node>value</node>, а скорее в <node property="X" />, в частности в тексте, связанном со свойством URL, например; <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/default.jpg'... /> - person thewinchester; 02.07.2010

Совершенно другой подход — запрашивать результаты API YouTube в формате JSON-C, а не в формате Atom XML:

http://code.google.com/apis/youtube/2.0/developers_guide_jsonc.html

Вам должно быть намного проще работать с результатами из кода JavaScript.

person Jeff Posnick    schedule 07.07.2010