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

Question

[Роман Павлов]

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

В общем, есть код страницы (канал на 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);
    }
   }
  }
});

Answer 1

[Leonid Fedotov]

Вам однозначно нужно подружиться с 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.

Comments

[Роман Павлов]

Если честно, я мало что понял. Вот то, что я имел ввиду.

[Leonid Fedotov]

@JaneHolland отправив конкретный запрос к Youtube API - вы получите конкретный ответ на то, что Вы запросили. В видео, на которое Вы дали ссылку Вас учат тому, с чем самостоятельно не разобрались. Парсинг сайта (или другого полезного ресурса) имеет место в крайнем случае, когда аналогичных методов получения информации от первого источника нет. Заметьте, YouTube достаточно добавить какой-нибудь новый элемент внутри divа с title, и у Вас вместо названия будет белиберда. В случае с запросом к API - вы получите конкретный ответ, на то, о чем вы попросили.

[Роман Павлов]

@iLeonidze я не понимаю, как использовать этот API. С чего, так сказать, начать D:

[Leonid Fedotov]

@JaneHolland я Вам конкретно пояснил. Вам вместо получения страницы канала на YouTube необходимо получать XML по адресу http://gdata.youtube.com/feeds/api/users/{USERNAME... В ответе вы получите XML-файл со всеми загруженными файлами пользователя. Там Вы найдете теги для каждого видео - внутри этого тега будут другие c какой-либо информацией о видео. К примеру, в теге Вы найдете название в видео, в теге Вы найдете URL-превью фотографии с размерами 360X480, а в теге Вы сможете найти превью уже низкого качества с размерами 180Х320. Выбираете из этого XML-файла последние 5 тегов и уже из них выбираете теги с нужной для Вас информацией :)

[Leonid Fedotov]

@JaneHolland парсер тостера убрал названия тегов :( но Вы догадались, да?

[Роман Павлов]

@iLeonidze это я понял, то есть мне просто парсить не HTML страницу, а XML через API? Всего лишь?

[Leonid Fedotov]

@JaneHolland да. Только в XML-ответе от YouTube API Вам предоставляется уже конкретный ответ с загруженными видео в более удобном варианте.

[Роман Павлов]

@iLeonidze омг, я думал все сложнее. Спасибо большое :)

[Роман Павлов]

@iLeonidze подскажите, как правильно парсить? Я нашел статьи на эту тему, и в одной из них предлагалось такое решение:

$(xml).find("entry").each(function () {

    var lvTtlHTML = '<a href="' + $(this).find("link".href() + '" target="_blank">' + $(this).find("title").text() + '</a>';
    $("#title").html(lvTtlHTML);

    var lvImgHTML = '<a href="' + $(this).find("link".href() + '"><img alt="' + $(this).find("title").text() + '" src="http:' + $(this).find("media:thumbnail").url() + '"></a>';
    $("#imgcon").html(lvImgHTML);
   });

[Leonid Fedotov]

@JaneHolland всё намного проще: используйте api.jquery.com/jquery.parsexml

[Роман Павлов]

@iLeonidze если честно, я не понял. Можно, пожалуйста, "ткнуть пальцем"? D:

[Владимир]

Омг, получайте не в xml, а в json, там уже всё готовое будет

[Роман Павлов]

@br3t а как получать в json, и как с этим работать? Я не очень понял

[Владимир]

В комментах к своему ответу я вам давал на ссылку на готовое решение

[Роман Павлов]

@br3t я смотрел, не очень понятен эта часть:

{
        console.log(data);
        for(var i=0; i < data.feed.entry.length; i++) {
        	var v = data.feed.entry[i];
        	$('body').append('<div>' +
        		'<a href="' + v.link[0].href + '"><h2>' + v.title.$t + '</h2></a>' +
        		'<h3>' + v.author[0].name.$t + '</h3>' +
        		'<img src="' + v.media$group.media$thumbnail[0].url + '" />' +
        	'</div>');
        }

[Роман Павлов]

*понятна

[Владимир]

@JaneHolland отправили ajax-запрос на Youtube, в data получили json-ответ, в data.feed содержится массив клипов, в цикле выводим их последовательно. Там специально console.log вставлен, чтобы можно было структуру ответа глянуть.

Answer 2

[Владимир]

А не проще Youtube API?

Comments

[Роман Павлов]

Для кого то может и проще, а мне не сильно. Я как тут, так и там не особо понимаю.

[Leonid Fedotov]

@JaneHolland, @br3t прав. Намного эффективнее, быстрее и надёжнее использовать Youtube API. На парсинг страницы уйдет намного больше времени, чем при конкретном запросе к API. Также, в случае если на Youtube изменится HTML-строение страницы (а такое бывает достаточно часто), с вероятностью в 90% Ваш способ перестанет работать так, как задумывалось.

[Роман Павлов]

@iLeonidze @br3t ну тогда можете "тыкнуть пальцем"? Я сначала разбирался с парсингом, теперь мне еще и с YT API? На это у меня уйдет довольно много времени, а насчет изменения структуры, то в моем случае это не проблема. Долго объяснять :\

[Роман Павлов]

А так я согласен с тем, что API лучше

[Роман Павлов]

И в конце концов я спросил как исправить проблему, а не как эффективней.

[Владимир]

jsfiddle.net/br3t/GS39E

[Leonid Fedotov]

@JaneHolland чистый и корректно работающий код всегда эффективнее :)

[Роман Павлов]

@iLeonidze а кто спорит :Р

Answer 3

[Илья Лесных]

Неужели у Ютуба нет API для этого, зачем парсить страницу, еще и на JS. И зачем использовать XMLHttpRequest, когда работа идет через jQuery? $.ajax / $.get уже не торт?

Comments

[Роман Павлов]

Тогда может подскажите, как получить последние 5 видео с определенного канала с помощью JS?