
Любителям вставлять в свои посты ютубовские ролики, предлагаю интересный плеер для этого видео сервиса.
Плеер отличается от встроенного тем, что имеет минималистичный дизайн (впишется в любой текстовой блог) и в развёрнутом виде вызывается в отдельном всплывающем окне. Одним словом (двумя), всё по-взрослому. Помимо превью-картинки, отображается название, количество просмотров, категория и рейтинг. Настоящая няшка (в браузерах не проверял, тестите сами ^^).
Сразу даю демку:
К сожалению, не всё так гладко, как хотелось бы, и настройки стилей, а именно позиционирование элементов плеера, придётся подбирать вручную. К слову, в этом шаблоне всё равзвалилось, и для демо пришлось насильственно выставлять опции. А на тестовом шаблоне встало замечательно с почти дефолтовыми параметрами.
Установка до этапа настройки не сложная. Изначально нужно иметь в блоге библиотеку jQuery. Как это делается, написано здесь.
Второй момент - нужно сходить на страницу автора-разработчика и скачать архив.
В архиве такая структура файлов и папок:
Синим помечен файл стилей, из которого придётся брать настройки для внешего вида плеера. Стили надо "отработать" сначала на тестовом блоге, потом положить либо в отдельный файл, либо вставить в шаблон, либо на страницу, но в последнем случае следует учесть, что их действие также будет рапространяться только на эту страницу.
Красным обведена папка со статическими файлами: картинки кнопок пауза, плей и т.д. Все закачиваем в блоггер через редактор постов или напрямую в альбом пикассы. Получившиеся ссылки вставляем в стили, о которых только что шла речь.
Оранжевым цветом я пометил скрипты. Их нужно положить на внешний хостинг, но не все. Файл jquery.js брать не надо, если эта библиотека уже установлена в блоге.
Со скриптами тоже самое. Либо на хостинг и прописать в шаблоне, либо на хостинг и прописать на странице.
Подключение блока с видеороликом происходит с помощью контейнеров:
<div class="wrapper"> <div class="player"> <div class="video-идешник_ролика" id="video"> </div> </div> </div>
Где "идешник" ролика это id файла на ютубе. Вот пример:
ссылка
Это как раз идешник файла на серверах ютуба.
Для ориентировки вот мои стили (иконки я уже переложил на хостинг Blogger):
<style> #content .wrapper-inside { background:none; } .wrapper { width:1000px; height: 100px; margin:0px -100 0; } .player { width:380px; position:relative; margin:0 auto; } .ytube { display:none; position:absolute; top:105px; left:-200px; width:500px; height:350px; padding:10px; background:url(http://3.bp.blogspot.com/-zkkXMkhRvJA/Tp7E840TuRI/AAAAAAAAGXY/0ezBnY1oWJk/s1600/opac.png) repeat; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; } .ytube .stop { display:block; position:absolute; top:4px; right:4px; width:16px; height:16px; text-indent:-9999px; outline:none; background:url(http://2.bp.blogspot.com/-tB91eUuvUT0/Tp7FDkTvLmI/AAAAAAAAGX8/CM_N5QfoQ2k/s1600/stop.png) no-repeat; } #video { float:left; clear:both; width:380px; } #video .image { float:left; width:120px; height:90px; font-size:0; line-height:0; overflow:hidden; position:relative; -moz-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; } #video .entry { float:right; width:245px; margin:-100px -45 0; font-weight:bold; } .entry .title { padding:0; margin:0; margin-bottom:5px; font-weight:bold; font-size:13px; color:#efefef; text-shadow:1px 1px 0 #212121; } .entry span { margin-right:8px; font-size:10px; font-weight:normal; color:#999; } .entry .favs { display:block; background:url(http://4.bp.blogspot.com/--lBJWVFONGY/Tp7E8pfxWBI/AAAAAAAAGXI/AUykrRD0bos/s1600/favs.png) no-repeat left center; padding-left:20px; margin-bottom:5px; } .image .controls { position:absolute; top:50%; left:50%; margin:-17px 0 0 -20px; padding:10px 15px; background:url(http://3.bp.blogspot.com/-zkkXMkhRvJA/Tp7E840TuRI/AAAAAAAAGXY/0ezBnY1oWJk/s1600/opac.png) repeat; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .controls a { float:left; display:block; text-indent:-9999px; outline:none; width:10px; height:15px; background-repeat:no-repeat; } .controls .play { background-image:url(http://3.bp.blogspot.com/-92o81r9QYmc/Tp7E9QBp0qI/AAAAAAAAGXs/4pAyfivyP9g/s1600/play.png); } .controls .pause { background-image:url(http://1.bp.blogspot.com/-kvaTn0nna38/Tp7E9GZ82gI/AAAAAAAAGXk/NtFkEzqDJWI/s1600/pause.png); } </style>Обращаю внимания на:
.wrapper - здесь ширина и высота враппера, чтобы плеер не мешал другим элементам на странице. Весь плеер двигать можно здесь.
#video .entry - информационная половинка плеера, если сместилась, то двигайте её.
Стили для образца я приложил...
И использованные скрипты:
<script src="http://ваш_хостинг/swfobject.js" type="text/javascript"> </script> <script src="http://ваш_хостинг/tubeplayer.js" type="text/javascript"> </script> <script src="http://ваш_хостинг/init.js" type="text/javascript"> </script>О всех неточностях и непонятках пишите в комменты, у меня вроде всё работает :).
Комментариев нет:
Отправить комментарий