Как выбрать определенный элемент в JavaScript?

Простите, если неправильно сформулировал вопрос :Р

В общем, есть код страницы (канал на YouTube) с помощью XMLHttpRequest, и в нем мне надо выбрать последние 5 загруженных видео, причем у самого последнего надо название, ссылка и превью, а у остальных 4 только ссылка и название.

На данный момент занимаюсь только первым видео, и вот что у меня есть:
var last_video = $('.yt-lockup-video:eq(0)', data).children('.yt-lockup-content');
var last_image = $('.yt-thumb-default:eq(0)', data).children('span').children('img').attr('src');
var last_title = last_video.children('.yt-lockup-title').children('a').html();
var last_href = $('a.yt-fluid-thumb-link:eq(0)', data).attr('href');
Оно работает, но не правильно. Мне выводится информация о 4 видео, а ссылка на 2. =\

Вот вывод:
var lvTtlHTML = '<a href="http://youtube.com' + last_href + '" target="_blank">' + last_title + '</a>'
$('#title').html(lvTtlHTML);

var lvImgHTML = '<a href="' + last_href + '"><img alt="' + last_title + '" src="http:' + last_image + '"></a>'
$('#imgcon').html(lvImgHTML);

Собственно, как исправить вывод?

P.S. Полный код, если надо:
$(document).ready(function () {
 xhr = new XMLHttpRequest();
 xhr.open("GET", "http://www.youtube.com/user/*********/videos/", true);
 xhr.send(null);
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) 
  {
   if (xhr.responseText) 
   {
    var data = xhr.responseText;

    var last_video = $('.yt-lockup-video:eq(0)', data).children('.yt-lockup-content');
    var last_image = $('.yt-thumb-default:eq(0)', data).children('span').children('img').attr('src');
    var last_title = last_video.children('.yt-lockup-title').children('a').html();
    var last_href = $('a.yt-fluid-thumb-link:eq(0)', data).attr('href');

    var lvTtlHTML = '<a href="http://youtube.com' + last_href + '" target="_blank">' + last_title + '</a>'
    $('#title').html(lvTtlHTML);

    var lvImgHTML = '<a href="' + last_href + '"><img alt="' + last_title + '" src="http:' + last_image + '"></a>'
    $('#imgcon').html(lvImgHTML);
    }
   }
  }
});
  • Вопрос задан
  • 2701 просмотр
Решения вопроса 1
iLeonidze
@iLeonidze
xbooster.ru
Вам однозначно нужно подружиться с YouTube API.

Есть очень вкусный метод
http://gdata.youtube.com/feeds/api/users/{USERNAME}/uploads?alt=atom&v=2

Все что Вам надо сделать - отправить GET-запрос по этому адресу подменив {USERNAME} на нормальное имя канала/пользователя. В качестве ответа получите XML-страницу, которую без труда можно парсить хоть на JavaScript, а еще легче на PHP:

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="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:yt="http://gdata.youtube.com/schemas/2007" gd:etag="W/"D08CSHY6cSp7I2A9XRZRGU8."">
    ...
     <media:group>
      <media:category label="People & Blogs" scheme="http://gdata.youtube.com/schemas/2007/categories.cat">People</media:category>
      <media:content url="http://www.youtube.com/v/w8FP0viwueo?version=3&f=user_uploads&app=youtube_gdata" type="application/x-shockwave-flash" medium="video" isDefault="true" expression="full" duration="115" yt:format="5" />
      <media:content url="rtsp://r4---sn-p5qlsu7r.c.youtube.com/CigLENy73wIaHwnqubD40k_BwxMYDSANFEgGUgx1c2VyX3VwbG9hZHMM/0/0/0/video.3gp" type="video/3gpp" medium="video" expression="full" duration="115" yt:format="1" />
      <media:content url="rtsp://r4---sn-p5qlsu7r.c.youtube.com/CigLENy73wIaHwnqubD40k_BwxMYESARFEgGUgx1c2VyX3VwbG9hZHMM/0/0/0/video.3gp" type="video/3gpp" medium="video" expression="full" duration="115" yt:format="6" />
      <media:credit role="uploader" scheme="urn:youtube" yt:display="Леонид Федотов">ile0nidze</media:credit>
      <media:description type="plain" />
      <media:keywords>гимназия 3, саратов, школа, последний звонок, выступление, начало</media:keywords>
      <media:license type="text/html" href="http://www.youtube.com/t/terms">youtube</media:license>
      <media:player url="http://www.youtube.com/watch?v=w8FP0viwueo&feature=youtube_gdata_player" />
      <media:thumbnail url="http://i1.ytimg.com/vi/w8FP0viwueo/default.jpg" height="90" width="120" time="00:00:57.500" yt:name="default" />
      <media:thumbnail url="http://i1.ytimg.com/vi/w8FP0viwueo/mqdefault.jpg" height="180" width="320" yt:name="mqdefault" />
      <media:thumbnail url="http://i1.ytimg.com/vi/w8FP0viwueo/hqdefault.jpg" height="360" width="480" yt:name="hqdefault" />
      <media:thumbnail url="http://i1.ytimg.com/vi/w8FP0viwueo/sddefault.jpg" height="480" width="640" yt:name="sddefault" />
      <media:thumbnail url="http://i1.ytimg.com/vi/w8FP0viwueo/1.jpg" height="90" width="120" time="00:00:28.750" yt:name="start" />
      <media:thumbnail url="http://i1.ytimg.com/vi/w8FP0viwueo/2.jpg" height="90" width="120" time="00:00:57.500" yt:name="middle" />
      <media:thumbnail url="http://i1.ytimg.com/vi/w8FP0viwueo/3.jpg" height="90" width="120" time="00:01:26.250" yt:name="end" />
      <media:title type="plain">Вступление - Последний звонок - Гимназия №3</media:title>
      <yt:aspectRatio>widescreen</yt:aspectRatio>
      <yt:duration seconds="115" />
      <yt:uploaded>2014-05-28T16:53:18.000Z</yt:uploaded>
      <yt:uploaderId>UCfP32ml2WjY8inASKPOoGvg</yt:uploaderId>
      <yt:videoid>w8FP0viwueo</yt:videoid>
     </media:group>
    ...
</feed>

В этом XML-ответе содержится вся информация обо всех загруженных видео. рассматриваете парсером только последние 5 загруженных видео. А там уже можно найти превью всевозможных размеров, названия, время, комментарии и т.д.

Чтобы тестировать свои запросы к Youtube API не вручную, а через удобную консоль - используйте Apigee консоль для YouTube. Если возникнут сложности с использованием - напишите в комментариях где непонятно :)

Конкретные примеры для JavaScript
Аналогичные примеры для других платформ

P.S. @br3t в комментариях представил более узкое и эффективное решение. Здесь же общее объяснение как знакомиться с Youtube API.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Неужели у Ютуба нет API для этого, зачем парсить страницу, еще и на JS. И зачем использовать XMLHttpRequest, когда работа идет через jQuery? $.ajax / $.get уже не торт?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы