Сегодняшний обзор опять посвящается сервису Youtube (ага-ага), а именно вопросу "как вставить в блог плеер ютуба и плейлист со своими ссылками".
На этот счёт уже была статья Как вставить в статью видеоклип (Youtube) с плейлистом, но я нашёл способ поинтереснее. А главное, в этом примере полно скриптов и стилей, но Blogger справится, он всеядный, тем более, что почти все элементы я положил на внешний хостинг.
И так, в центре внимания разработка под скучным названием jquery-youtube-player от badsyntax.
Все описания и примеры с ссылками на почему-то забаненные ролики находятся в архиве.
Самое лучшее, что можно было оттуда вытянуть - это вот такой плеер с плейлистом:
Установка.
Для установки необходимо скачать все скрипты со стилями, положить на внешний (или свой) хостинг и прописать в <head></head> шаблона своего блога.
jquery.youtube.player.min.js
skin.css
jquery.jcarousel.min.js
Библиотека jQuery, точнее, ссылка на неё, тоже должна там быть (вставить самостоятельно, если её в блоге нет), а также скрипт swfobject.js для плеера (см. ниже).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="хостинг-трололо/jquery.youtube.player.min.js"></script> <link type="text/css" rel="stylesheet" href="хостинг-трололо/skin.css" /> <script type="text/javascript" src="хостинг-трололо/jquery.jcarousel.min.js"></script>Кнопки в стилях я переделал и переложил на хостинг пикасы, поэтому можно ничего не менять.
Теперь перейдём к той части, которая вставляется непосредственно на страницу.
1) Качаем самый главный, настроечный, скрипт в текcтовом документе maincfg.txt, открываем, редактируем и вставляем прямо в тело статьи (поста), как есть (сохраняя теги <script></script>).
В этом скрипте необходимо указать id роликов с Youtube (на скриншоте красный) + названия (на скриншоте жёлтый), которые всплывут при наведении курсора мыши на картинку (thumbnail):
2) Ну и последний шрих - html код, которым плеер ютуба с плейлистом интегрируется в статью:
<div class="youtube-player"><div class="youtube-player-video"><div class="youtube-player-object">Вы должны включить или установить в браузере FlashPlayer и поддержку JavaScript.</div></div></div> <div class="custom-playlist"></div>Здесь несколько дивов, вложенных один в другой, в одном из которых оставлено предупреждение для тех посетителей, кто отрубил/сломал/не доставил Flash Player и JavaScript в своём браузере.
Расстояние между плеером и полоской плейлиста здесь отрегулировано пробелом перед <div class="custom-playlist"></div>. Это специфика Blogger (по умолчанию блоггер учитывает пустые строки, если это не изменить в админке). В остальных случаях воспользуйтесь тегом <br />.
вроде бы все сделал как написано, не работает
ОтветитьУдалить