В этом материале я опишу некоторые настройки внешнего вида, то бишь скина, или шкурки плеера JW Player, а также некоторые способы воспроизведения видео с помощью этого проигрывателя. Про общую установку на сайт этого плеера рассказывается в статье Установка и настройка JW Player
Для начала нам понадобится выбрать скин плеера Различные варианты скинов или «шкурок» интерфейса скачать можно на этой страничке, здесь их около ста двадцати разных вариантов. Лично мне понравился скин polishedmetal.zip, хотя я его слегка переделал, сделав фон панели прозрачным (этот скин использован в видеоокне вверху странички).
Но прозрачный скин целесообразно использовать только в том случае, если тулбар находится в режиме исчезания (over), если же тулбар жёстко закреплён вверху или внизу окна (режимы top и bottom), то прозрачный вариант будет просто некрасив. В этом случае лучше применить непрозрачную шкурку polishedmetal. Скачать эти два вида скинов плеера (прозрачный вариант crystal.zip и непрозрачный polishedmetal.zip) можно по этой ссылке, напрямую с файлообменника. После того, как скин скачан, необходимо разместить его на сайте. Я положил его в папку videoplayer, где находится и с сами проигрыватель. Обращаю Ваше внимание на то, что файл скина изначально сжат в архив ZIP, и именно в таком виде, т.е без разархивации, он и должен быть размещён на сервере.
Изначально, при открытии странички сайта с этим проигрывателем, видеоокно имеет чёрный или прозрачный цвет. Поэтому, для увеличения красивости, можно снять скриншот с видео (сделать это можно с помощью программ Media Player Classic или VLC media player, о них рассказывается на этом сайте) и разместить его на Вашем сервере, примерно так: MySite/videoplayer/videoclips/image.jpg
Итак, мы разместили на сервере:
- исходный код плеера
- видеофайл
- скин в архиве ZIP
- картинку заставки видео
Теперь можно притупать к написанию кода, который будет размещён на страничке вашего сайта.
Настраивать внешний вид лучше всего не вручную, а перейти на страничку Мастера установки. Все необходимые нам настройки находятся в этом меню:
В первом пункте Select an Example Setup надо выбрать тип видео. Для показа одиночного видео, если это видео с Вашего сервера, то выбираем первый пункт раскрывающегося меню «flvplayer width a single video», если Вы хотите воспроизвести видео с YouTube, то выбираем «flvplayer width youtube video».
Основные настройки JW Player находятся во втором пункте,Change Your Flashvars.
Разбираем подпункты:
Embed parameters
source — прописываем полный путь, где находится файл player.swf у вас на сервере, к примеру http://www.MySite/videoplayer/player.swf , где http://www.MySite — адрес Вашего сайта.
height — высота видеоокна
width — ширина видеоокна
Playlist мы не используем, т.к. у нас нет потокового видео
File properties
duration — продолжительность видео. Если ролик длинный, а Вам по каким-то причинам нужно показать только часть его, например, для анонса, то можно проставить в строку время длительности в секундах.
file — путь Вашего видеофайла на сервере, что-то вроде http://www.MySite/videoplayer/videoclips/video.flv, где MySite — Ваш сайт, а video.flv — ваш видеофайл.
image — путь заставки (картинка jpg, pnd или gif) для видео на Вашем сервере или другом сайте, например http://www.MySite/videoplayer/videoclips/image.jpg , где http://www.MySite — адрес Вашего сайта, а image.jpg — файл с картинкой. Если оставить эту строку пустой, то цвет окна при загрузке будет по умолчанию прозрачный или указанный в следующем пункте Colors в строке screencolor. Остальные подпункты при воспроизведении одиночного видео не используются
Colors
backcolor — задаём фоновый цвет тулбара
frontcolor — цвет кнопок и цифр тулбара
lightcolor — цвет кнопок тулбара при наведении на них курсора мыши
screencolor — цвет фона под видео
Если у Вас есть картинка заставки видео и файл скина, то значения в эти строки вводить не нужно
Layout
controlbar — здесь надо выбрать расположение и отображение тулбара. Предлагается четыре значения,
- bottom(default) — значение по умолчанию, тулбар внизу
- top — тулбар вверху окна
- over — тулбар внизу и исчезает через две сек после снятия с него курсора мыши
- none — тулбар скрыт. Естественно, применять эту настройку надо лишь при автоматическом старте воспроизведения видео
skin — в этой строке прописываем путь до Вашего файла со скином, например http://www.MySite/videoplayer/crystal.zip.
Behavior
autostart — автозапуск видео, значение false-нет автозапуска, true-есть автозапуск
icons — управляет отображением кнопки воспроизведения видео в центре окошка плеера, которая появляется при загрузке страницы или при паузе вопроизведеня, а также индикатора загрузки (буферизации) видеофайла. При значении true (default) значки отображаются, при значении false на отображаются.
mute — при значении false(default) звук включен при запуске видео. При значении true звук выключен.
repeat — автоматический повтор видео, значение false-нет повтора, true-есть повтор
volume — уровень звука при старте видео. Задаётся в целых числах от одного до ста.
После того, как все параметры введены, жмём кнопку
Страничка сгенериует javascript код видео, который можно будет скопировать из окна под кнопкой. Если Ваш сайт не поддерживает javascript, то нужно нажать на ссылку simple embed code, которая находтся в тексте, размещённым под кнопкой, и код выведется в упрощённом виде. После чего код надо просто разместить на страничке Вашего сайта.
