FLV плеер видео для сайта


Предлагаю рассмотреть ещё один вариант неплохого плеера для размещения одиночного видео на страничке сайта, который так и называется - FLV Player. Он гораздо проще, чем JW Player, исходный код легче, встраиваемый код короче, видеоокно не содержит никаких сторонних иконок и т.п.

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



Вот некоторые из настроек:

  • возможность вида видеоокна без полосы с кнопками управления
  • возможность настраивать внешний вид плеера под дизайн Вашего сайта
  • автозапуск видео при загрузке страницы
  • автоподгрузка видео
  • буферизация видео (чтобы оно игралось без тормозов)
  • зацикливание (видео доходит до конца, после чего начинает играть сначала)
  • подключение субтитров
  • вывод заголовка или картинки в самое начало видео
  • вкл/выкл различных элементов управления (громкость, время, play, pause;)
  • смена прорачности плеера
  • возможность использовать свои скины

Для начала надо скачать файл с исходным кодом движка плеера по ссылке внизу этой страницы, разархивировать папку и разместить файл player_flv_maxi.swf в папке в корне сайта, например в папке videoplayer. В этой же папке создаём ещё папку, например, videoclips (получится путь /videoplayer/videoclips), туда помещаем свой видеофайл FLV. Понятно, что место размещения ролика и движка плеера на сайте роли не играют, просто дальнейшее описание установки плеера в этой статье будет сделано на основе этих примеров.

Код у плеера может быть иметь два варианта, простой и настраиваемый с помощью текстового файла настроек.

Рассмотрим оба.

Вариант кода без файла настроек

Копируем и размещаем этот код на страничке Вашего сайта:

1
2
3
4
<object type="application/x-shockwave-flash" data="http://www.MySite.ru/videoplayer/player_flv_maxi.swf" width="400" height="245">
     <param name="movie" value="player_flv_maxi.swf" />
     <param name="FlashVars" value="flv=http://www.MySite.ru/videoplayer/videoclips/MyFile.flv" />
</object>

В коде меняем MySite.ru на URL вашего сайта, MyFile.flv на имя Вашего видеофайла. Адрес размещения должен быть полным, включая http://www. Значения ширины и высоты width="400" height="245" меняем на размеры воспроизводимого ролика. Если размеры видео больше желаемых, то в коде можно указать меньшие значения, оптимальные для показа на сайте, главное, правильно соблюсти пропорции ширины и высоты.

Вышеуказанный код выведет нам такое окно видео:

Собственно, про простой вариант больше добавить нечего.

Вариант кода, использующий файл настроек

Настройки плеера осуществляются с помощью текстового файла flv-config.txt, который размещается в папке в корне сайта, например в папке videoplayer. Также на сайте можно разместить рисунок-заставку для видео формата jpg, png или gif.

Проверяем:
Основной код находится по пути: http://www.MySite.ru/videoplayer/player_flv_maxi.swf
Видеофайл находится: http://www.MySite.ru/videoplayer/videoclips/MyVideo.flv
Файл настройки находится: http://www.MySite.ru/videoplayer/flv-config.txt
Рисунок заставки находится: http://www.MySite.ru/videoplayer/videoclips/MyImage.jpg

1
2
3
4
<object type="application/x-shockwave-flash" data="http://www.MySite.ru/videoplayer/player_flv_maxi.swf" width="400" height="245">
     <param name="movie" value="player_flv_maxi.swf" />
     <param name="FlashVars" value="config=http://www.MySite.ru/videoplayer/flv-config.txt" />
</object>

Данный код отличается от предыдущего изменением значения параметра FlashVars. Если в предыдущем коде мы задавали видеофайл и путь к нему value="flv=http://www.MySite.ru/videoplayer/videoclips/MyFile.flv", то теперь задаём файл настроек flv-config.txt, в котором будет указан путь к видеофайлу, заставке и другие параметры.
В файл flv-config.txt нужно ввести следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
flv=http://www.MySite.ru/videoplayer/videoclips/MyVideo.flv
startimage=http://www.MySite.ru/videoplayer/videoclips/MyImage.jpg
videobgcolor=000000
iconplaycolor=FFFFFF
iconplaybgalpha=50
title=/n/n/nПсихованный кролик
showtitleandstartimage=1
showiconplay=1
titlesize=20
titlecolor=D5E0BE
width=400
height=245
autoplay=0
playertimeout=3000
loop=0
playeralpha=80
playercolor=434343
bgcolor=22251E
bgcolor1=22251E
bgcolor2=343434
buffer=5
buffermessage=
showplayer=autohide
margin=3
showstop=1
showvolume=1
showtime=1
showfullscreen=1
showswitchsubtitles=0
showloading=always
showmouse=autohide
buttoncolor=DDDDDD
buttonovercolor=AAAAAA
sliderovercolor=222222  
loadonstop=0

В этом коде Вам надо изменить значения MySite.ru на свой сайт, а также файлы MyVideo.flv и MyImage.jpg на свои.
Описание остальных параметров я привожу ниже, их тоже можно менять под свой дизайн странички.

  • flv - полный URL файла видео.
  • startimage - полный URL рисунка-заставки для видео. Без указания этого параметра дисплей по умолчанию будет чёрным (000000).
  • videobgcolor - цвет окна видео при загрузке страницы, работает, если не задан параметр startimage. По молчанию задан цвет 000000
  • showiconplay - иконка воспроизведения в центре окна видео, появляющаяся при загрузке страницы. 1-показ, 0-нет. По умолчанию 0.
  • iconplaycolor - цвет иконки воспроизведения, по умолчанию 000000.
  • iconplaybgcolor -цвет фона под иконкой воспроизведения.
  • iconplaybgalpha - прозрачность фона под иконкой воспроизведения, значения от 0 до 100.
  • title - заголовок видеоролика, появляется при загрузке страницы. Если название пишется кириллическими буквами, то кодировка обязательно должна быть UTF-8. Показывается, если не задан параметр startimage. Перед самим текстом названия я поставил три переноса строки /n, для того, чтобы текст не налезал на иконку воспроизведения iconplaycolor
  • showtitleandstartimage - при значении 1 на дисплей выводится одновременно название видео и рисунок-заставка.
  • titlesize - размер шрифта заголовка в пикселах. По умолчанию равен 20.
  • titlecolor - цвет шрифта заголовка. По умолчанию равен ffffff.
  • width - ширина видеоролика.
  • height - высота видеоролика.
  • autoplay - автоматический запуск видео при загрузки страницы (1-включено, 0-выключено). По умолчанию выключено.
  • autoload - автоматическая загрузка видео после загрузки страницы (1-вкл 0-выкл). По умолчанию выключено. При выключенном параметре autoload видео загружается только после запуска воспроизведения видео. Поэтому, с включением autoload надо быть осторожнее, а то при большом весе видеофайла пользователи соединений с лимитированным и платным трафиком могут хорошо попасть.
  • loop - зацикливание видео (1-вкл 0-выкл).
  • playertimeout - время исчезания панели управления (тулбара) после снятия с неё курсора мыши. Задаётся в миллисекундах, по умолчанию задано значение 1500 миллисекунд.
  • playeralpha - непрозрачность тулбара плеера, задаётся в числах от 1 до 100, 1-полностью прозрачный, 100-непрозрачный. По умолчанию задана 100.
  • playercolor - цвет тулбара. По умолчанию 111111
  • bgcolor - цвет фона под окном проигрывателя , по умолчанию FFFFFF.
  • bgcolor1 - начальный цвет градиентного перехода вверху рамки, по умолчанию 7B7B7B.
  • bgcolor2 - начальный цвет градиентного перехода вверху рамки, по умолчанию 333333.
  • buffer - буферизация, задаётся время подгрузки видео в секундах. По умолчанию задан 5 сек.
  • buffermessage - сообщение о буферизации. Можно написать на русском: Буферизация файла: _n_ , где _n_ - показ в процентах. Но лучше поставить как в примере кода - buffermessage= , чтобы не мелькало. По умолчанию задан: Buffering _n_
  • showplayer - режим показа тулбара плеера. always - постоянный показ тулбара, autohide - тулбар исчезает через время, заданное в playertimeout, never - тулбар скрыт. Последнее значение имеет смысл задавать при autoplay=1. По умолчанию задан: autohide.
  • margin - толщина рамки скина проигрывателя в пикселях. Задаётся в целых числах. По умолчанию 5.
  • showstop - показ кнопки Стоп. 1-показ, 0-нет. По умолчанию 0.
  • showvolume - показ кнопки уровня звука. 1-показ, 0-нет. По умолчанию 0.
  • showtime - показ время воспроизведения. 1-показ, 0-нет. По умолчанию 0.
  • showfullscreen - показать кнопку переключения на полный экран. 1-показ, 0-нет. По умолчанию 0.
  • showswitchsubtitles - показать кнопку "показать/скрыть субтитры". 1-показ, 0-нет. По умолчанию 0.
  • showloading - показать процесс загрузки. Имеет также как и showplayer, три значения, autohide, always и never. По умолчанию autohide
  • showmouse - показать курсор мыши на дисплее. Имеет также как и showplayer, три значения, autohide, always и never. По умолчанию autohide. Курсор исчезает с дисплея вместе с тулбаром.
  • buttoncolor - цвет кнопок тулбара.
  • buttonovercolor - цвет кнопок тулбара при наведении на него курсора мыши. По умолчанию FFFF00.
  • slidercolor1 и slidercolor2 - цвета верхней и нижней половины ползуна на полосе воспроизведения.
  • sliderovercolor - цвет ползуна при наведении на него курсора мыши.
  • loadonstop - при значении параметра 1 подгрузка видео останавливается при нажатии на кнопку Стоп. По умолчанию 0.
  • srt - субтитры, если есть (1-вкл 0-выкл). Файл субтитров должен быть расположен в том же месте и называться, как видеофайл, а также иметь расширение .srt
  • srtcolor - цвет субтитров.

Окно плеера, получившееся в результате применения этих настроек, приведено вверху страницы.

Скачать бесплатно FLV плеер видео для сайта:

Теги:

Помощь сайту

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

Ссылка на страничку с описанием.

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

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

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

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

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

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

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

На достаточно редком кодеке GoToMeeting Codec G2M3 сделаны большинство обучающих вебинаров и онлайновых конференций. Как отличить такое видео? Файл...
Чтобы быстро убрать недостатки кожи, совершенно не обязательно быть продвинутым пользователем Фотошопа. Представляем вашему вниманию простую...
Интерфейс программы
С помощью этой программы Вы можете разделить за пару кликов большой видеофайл на два или несколько маленьких файлов, обрезать видео, либо вырезать из...
Снимаете свое или монтируете чужое видео для Youtube? Яркая и информативная обложка для ролика - дело нескольких минут. Вам понадобятся: Photoshop...