Скрипты последних публикаций на Youtube


Сегодня в обзор вошли два скрипта, которые можно использовать для автоматического показа в блоге последних роликов канала или пользователя ютуба.
В первом скрипте просто выкладывается фид последних публикаций пользователя, во втором в дополнение к превьюшкам выводится плеер для предпросмотра.
С помощью этих скриптов можно информировать своих посетителей и постоянных читателей насчёт обновлений видеоуроков и т.п. материала.
Для того, чтобы всё это работало, понадобится jQuery.

Демо
:

Лунтик. Последние серии.


Содержимое скрипта можно посмотреть здесь.
Главный параметр в нём - это ссылка фида:
url: "http://gdata.youtube.com/feeds/users/имя_пользователя/uploads?alt=json-in-script&format=5&max-results=6"
В которой нужно задать имя пользователя (владельца канала). Количество выведенных роликов регулируется в max-results=6.

Подключается вывод роликов в пост через блочный элемент div:
<div id="videos">
</div>

Поскольку по умолчанию лента с роликами выглядит как вертикальная полоса, то её нужно привести к человеческому виду, используя стили. Например, "разбить" на три горизонтальных колонки и убрать жирную точку из списка ul:

<style>
#videos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
}
ul {list-style-type:none;}
</style>

Второй способ посложнее и более громоздкий. Зато результаты обрабатываются и выводятся "на лету", без перезагрузки страницы.

Демо:

Лунтик. Последние серии.



Подключаем скрипт для плеера swfobject.js:
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
Содержимое основного скрипта, который взаимодействует с YouTube Data API, можно взять здесь.
Обратите внимание на управление функциями плеера в нём:
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
(autoplay?1:0), 'player', '290', '250', '9.0.0', false,
false, {allowfullscreen: 'true'})

Теперь оставляем ссылку на фид пользователя (канала):
<script 
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/имя_пользователя/uploads?alt=json-in-script&callback=showMyVideos2&max-results=4">
</script>
Её редактирование описано в предыдущем примере (имя пользователя+кол-во публикаций).

И выводим всю эту байду в статью, ограничивая размерами контейнера:
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player"></object>
</div>
<div id="videos2">
</div>

Не забываем про стили:
<style>
.titlec {
font-size: small;
}
.videos li {
float: left;
width: 10em;
margin-bottom: 0em;
}
ul.videos
{
margin-bottom: 0em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
</style>

Источники:
https://gist.github.com/1232288
http://code.google.com/apis/youtube/developers_guide_protocol.html
Материалы yt_json_codelab.

1 комментарий:

  1. Здравствуйте я хотел воспользовался 2 примером
    но у меня не получилось. так как на странице было пусто!!
    первый вариант заработал а 2 нет! скажите пожалуйста почему не работает? скрипт просто чудо долго искал его))
    мой сайт tv-glaz.fo.ru
    моя почта - shev_alexei@mail.ru

    вот мой построенный код http://zalil.ru/34590474
    свяжитесь пожалуйста по почте со мной. очень хочеться решить эту проблему

    ОтветитьУдалить