Настройки внешнего вида, тулбара и воспроизведения видео JW Player

В этом материале я опишу некоторые настройки внешнего вида, то бишь скина, или шкурки плеера 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

Итак, мы разместили на сервере:

  1. исходный код плеера
  2. видеофайл
  3. скин в архиве ZIP
  4. картинку заставки видео

Теперь можно притупать к написанию кода, который будет размещён на страничке вашего сайта.
Настраивать внешний вид лучше всего не вручную, а перейти на страничку Мастера установки. Все необходимые нам настройки находятся в этом меню:

меню настройки мастера установки  JW Player

В первом пункте 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 - уровень звука при старте видео. Задаётся в целых числах от одного до ста.

После того, как все параметры введены, жмём кнопку

кнопка запуска генерации кода jwplayer

Страничка сгенериует javascript код видео, который можно будет скопировать из окна под кнопкой. Если Ваш сайт не поддерживает javascript, то нужно нажать на ссылку simple embed code, которая находтся в тексте, размещённым под кнопкой, и код выведется в упрощённом виде. После чего код надо просто разместить на страничке Вашего сайта.

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

Преимущества: гибкие настройки. Вы можете задать в настройках, чтобы фонарик сразу включался при запуске приложения и автоматическое включение таймера при запуске приложения. Настройки позволяют отключить блокировку экрана и блокировку фонарика кнопкой включения телефона. Также вы можете самостоятельно установить время таймера.

Если приложение наберёт популярность, это даст стимул автору на создание новых приложений с учётом пожеланий посетителей сайта.

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

В предыдущем материале я рассказал, как установить JW Player на сайт, используя облачную технологию. Это, конечно, неплохо, когда движок плеера не...
Программа QGifer - простая, бесплатная и функциональная программа, предназначенная для конвертации видео в GIF-анимацию. QGifer позволяет извлекать...
интерфейс программы
В этой статье вы можете бесплатно скачать и ознакомиться с краткой инструкцией по работе с несколькими программами для получения информации об...
Конвертируем видео на  G2M4
Ранее я писал про просмотр и конвертацию видео G2M3. Но для новой версии кодека G2M4 данный способ не подходит, а вебинары и конференции сейчас...