Проигрыватель видео для сайта JW Player

В статье речь пойдёт, как понятно из заголовка, об установке и настройке на сайт плеера JW Player. Данный плеер поддерживает видео в формате flv, MPEG-4(mp4) с кодеком AVC(H264), MP3 и YouTube Videos.

Проигрыватель видеофайлов JW Player обладает весьма гибкими настройками, в частности, можно изменять внешний вид (скин) и расцветку самого скина, позволяет делать исчезающим панель управления видео а также менять её расположение, устанавливать свою заставку, иконку, заголовок клипа и т.д. Видеофайл, воспроизводимый JW Player, может быть расположен как у вас на сайте, так и на любом другом. Имеется возможность воспроизведения видео с YouTube без вех "фирменных" ютубовских атрибутов, захламляющих видеоокно.

Вот что какую оболочку видео можно получить, используя самый простой код:

Самый простой способ воспроизвести видео на сайте - это загрузить видеоролик на какой-нибудь хостинг видеофайлов типа YouTube и вставить код на страницу. Но тут имеется один громадный недостаток. В этом случае видео будет просматриваться со ссылкой на YouTube, с логотипом YouTube, с рекламой, которая появляется над полосой проигрывания, а в конце воспроизведения видео получить ссылки на сторонние ролики, которые уведут от темы публикации.
Избежать вышеуказанных недостатков позволит установка собственного видеоплеера.
Для начала надо скачать исходный код плеера с официальной странички , или, если Вам лень там регистрироваться, то можно скачать архив с двумя вариантами плееров напрямую с файлообменника Depositfiles.com. На момент написания статьи предлагается два варианта проигрывателей, mediaplayer-5.7 и mediaplayer-5.7-viral, последний отличается от первого тем, что содержит плагин обмена видео. Для одиночного воспроизведения видео это не требуется, поэтому я использую mediaplayer-5.7 без плагина обмена.

Теперь об установке.

Разархивируем скачанный файл. В корне нашего сайта создаем папку, к примеру videoplayer, и из разархивированной папки переносим туда файл player.swf . В этой же папке создаем еще одну папку, например videoclips, туда мы будем складывать видеофайлы.
Вставляем на страничку сайта, на которой мы хотим разместить видео, следующий код:

1
2
3
4
5
6
7
8
9
10
11
<script type='text/javascript' src='jwplayer.js'></script>
 
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'http://www.MySite.ru/videoplayer/player.swf',
    'file': 'http://www.MySite.ru/videoplayer/videoclips/MyClips.flv',
    'controlbar': 'bottom',
    'width': '360',
    'height': '240'
  });
</script>

Либо, если страничка не позволяет использовать JavaScript, например, сайты, сделанные на Drupal без без соответствующих фильтров, то код будет следующим:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='360' height='240' id='single1' name='single1'>
<param name='movie' value='http://www.MySite.ru/videoplayer/player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=http://www.MySite.ru/videoplayer/videoclips/MyClips.flv'>
<embed
type='application/x-shockwave-flash'
id='single2'
name='single2'
src='http://www.MySite.ru/videoplayer/player.swf'
width='360'
height='240'
bgcolor='undefined'
allowscriptaccess='always'
allowfullscreen='true'
wmode='transparent'
flashvars='file=http://www.MySite.ru/videoplayer/videoclips/MyClips.flv'
/>
</object>

В коде меняем высоту width=240 и ширину height=360 на необходимые, вместо MySite.ru указываем свой сайт и вместо MyClips.flv название файла вашего клипа. Обращаю внимание на то, что название сайта, клипа, высота и ширина видеоокна во втором коде (который без JavaScript) встречаются несколько раз.

Вот пример видео, вставленного на страничку с помощью кода, приведённого выше:


Приведённый вариант плеера является наиболее простым и не имеет собственных настроек. О тонких настройках внешнего вида и функционала JW Player рассказывается в статье Настройки внешнего вида, тулбара и воспроизведения видео JW Player.

Как я указал в начале статьи, этот плеер позволяет просматривать видео с сайта YouTube. При воспроизведении видео через JW Player, а не напрямую с YouTube, видеоокно освобождается от ютубовского хлама, замусоривающего ролик, как то вставки всплывающей рекламы, список похожих клипов, открытия страницы сайта YouTube и т.п.

Код в этом случае примет следующий вид:

1
2
3
4
5
6
7
8
9
10
11
<script type='text/javascript' src='jwplayer.js'> 
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'http://MuSite/videoplayer/player.swf',
    'file': 'file=http://www.youtube.com/watch?v=MUe0Uh10GPc',
    'screencolor': '000000',
    'controlbar': 'bottom',
    'width': '360',
    'height': '265'
  });
</script>

Либо вариант для страницы без поддержки javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='360' height='265' id='single1' name='single1'>
<param name='movie' value='http://MuSite/videoplayer/player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=http://www.youtube.com/watch?v=MUe0Uh10GPc&screencolor=000000'>
<embed
type='application/x-shockwave-flash'
id='single2'
name='single2'
src='http://MuSite/videoplayer/player.swf'
width='360'
height='265'
bgcolor='undefined'
allowscriptaccess='always'
allowfullscreen='true'
wmode='transparent'
flashvars='file=http://www.youtube.com/watch?v=MUe0Uh10GPc&screencolor=000000'
/>
</object>

Как и в предыдущем случае, в коде надо изменить MuSite на URL Вашего сайта, и вместо моего адреса ютубовского файла http://www.youtube.com/watch?v=MUe0Uh10GPc подставить свой.

Пример воспроизведения видеофайла, размещённого на видеообменнике YouTybe (это видео я сделал в Photoshop, материал о его создании здесь):

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

Как вставить фоновую картинку (заставку) видео, сделать автоматическое воспроизведение ролика при загрузке и обновлении страницы, а также, как сделать непрерывное (циклическое) воспроизведение видео, рассказано здесь

Помощь сайту

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

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

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

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

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

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

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

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

Интерфейс программы
С помощью этой программы Вы можете разделить за пару кликов большой видеофайл на два или несколько маленьких файлов, обрезать видео, либо вырезать из...
интерфейс
Light Alloy - компактный мультимедийный плеер с интерфейсом на русском языке. Поддерживает практически все распространённые мультимедийные форматы....
Имеется три основных вида звукового сопровождения для видеоклипа: 1. звук, уже имеющихся на видео, записанный, к примеру, микрофоном камеры, и Вы...
четыре вещи, которые следует знать о создание видео в Photoshop
Большинство фотографов, с которыми я общался и которые снимали видео фотокамерами типа DSLR, говорили мне, что у них есть отдельный пакет для работы...

Комментарии


Аватар пользователя Алёна
Автор комментария: Алёнаот: 21/12/2013 - 09:14

Здравствуйте. Спасибо огромное, что весь этот ужас (официально он уместился на двухтомнике PDF) так просто объяснили.) Но у меня проблема... Видео с youtube плеер ловит отлично. А вот из локальной папки пишет "Video not found or access denied: и адрес файла" ... Перепроверила правильность написания кода несколько раз. Сайт у меня на Joomla 3.0 на локалке Denwerа. Может быть, из-за этого? Помогите, пожалуйста!


Аватар пользователя admin
Автор комментария: adminот: 21/12/2013 - 13:03

По всей видимости, проблема заключается в правильности написания пути к файлу. Попробуйте положить файл в корень сайта и указать путь до корня.


Аватар пользователя Алёна
Автор комментария: Алёнаот: 21/12/2013 - 20:33

Спасибо. Я отказалась в данный момент от этого плеера в пользу Allvideos. Там проблем пока не возникает. Так, пара вопросов про внешний вид.))


Аватар пользователя admin
Автор комментария: adminот: 21/12/2013 - 20:52

Я в Joomla на силён, но не надо быть специалистом, чтобы увидеть, что этот плагин очень громоздкий и создаст серьёзную дополнительную нагрузку на сервер, в частности, на CPU. Его применение будет оправдано, если у Вас на сайте транслируется видео от хотя бы половины поддерживаемых плагином видеопровайдеров, а это более 20-ти служб.

Так что может стоит подумать?


Аватар пользователя Алёна
Автор комментария: Алёнаот: 21/12/2013 - 23:50

С этой стороны я как-то не подумала.)) Хорошо, спасибо.


Аватар пользователя dmuradz
Автор комментария: dmuradzот: 05/01/2014 - 14:42

на joomla есть много других компонентов для видео галереи например: hd web gallery, youtube gallery...
установите компонент к2 и переопределите шаблон, можно и без каких либо других модулей тоже сделать


Аватар пользователя dmuradz
Автор комментария: dmuradzот: 05/01/2014 - 15:25

Как можно указать превью видео?


Аватар пользователя admin
Автор комментария: adminот: 05/01/2014 - 17:44

Превью делается заранее, можно с помощью MPC-плеера, там есть функция создания скриншщота из видео.
В этом и есть недостаток JW Player'а, он сам не делает превью.

А если использовать видео с Ютуба, то там можно сделать через панель управления.


Аватар пользователя dmuradz
Автор комментария: dmuradzот: 07/01/2014 - 15:33

я имел ввиду где его указать в коде.
flashvars='file=url-файла&image=url-image

еще один вопрос, как вывести заголовок видео в плеере?


Аватар пользователя dmuradz
Автор комментария: dmuradzот: 07/01/2014 - 15:50

нужен вариант страницы без поддержки javascript


Аватар пользователя admin
Автор комментария: adminот: 09/01/2014 - 14:14

В общем, они свой сервис перевели целиком на облако. Но я сделал вставку скриншота старым способом.
В примере кода путь до скриншота: http://www.MySite/files/SCREENSHOT.JPG

Код будет выглядеть так:

1
2
3
4
5
6
7
8
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="260" id="single1" name="single1" width="430">
<param name="movie" value="http://www.MySite/files/videoplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="file=http://www.MySite/files/videoclip.flv&amp;image=http://www.MySite/files/SCREENSHOT.JPG&amp;backcolor=888888&amp;frontcolor=444444&amp;lightcolor=EEEEEE&amp;screencolor=000000&amp;skin=/sites/default/files/videoplayer/crystal.zip&amp;controlbar=over" />
<embed allowfullscreen="true" allowscriptaccess="always" bgcolor="undefined" flashvars="file=http://www.MySite/files/videoclip.flv&amp;image=http://www.MySite/files/SCREENSHOT.JPG&amp;backcolor=888888&amp;frontcolor=444444&amp;lightcolor=EEEEEE&amp;screencolor=000000&amp;controlbar=over" height="260" id="single2" name="single2" src="http://www.MySite/files/videoplayer/player.swf" type="application/x-shockwave-flash" width="430" wmode="transparent"></embed>
</object>

Как вывести заголовок, уже и не помню. Теперь, наверное, только через ихнее облако.


Аватар пользователя dmuradz
Автор комментария: dmuradzот: 09/01/2014 - 17:33

со скриншотом разобрался, нужно было узнать как выводить title видео, жаль что не помните (