Еще один плеер для воспроизведения потокового видео!
Скачивайте плеер JW FLV Media Player.
Из всех файлов нужны только player.swf и swfobject.js
Все остальное можно выбросить.
Загружайте эти два файла и видео куда-то на свой сервер. Теперь просто втыкаете в нужном месте на странице такой html
Code
<script type="text/javascript" src="путь к плагину/swfobject.js"></script>
<div id="player">Здесь можно написать что то, если вдруг не будет грузится плеер. Возможно не включен flash в браузере.</div>
<script type="text/javascript">
var so = new SWFObject('путь к плееру/player.swf','mpl','400','250','8');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','file=video.flv');
so.write('player');
</script>
Если вы все сделали правильно, то вы увидите черное окно плеера, при нажатии на воспроизведение начнет показывать видео. Разбор этого кода.
Загрузка вспомогательного класса, который упрощает использование флеш на сайте. Указывайте путь где лежит этот файл.
var so = new SWFObject('player.swf','mpl','400','250','8');
Указываем теперь этому классу где лежит плеер и задаем настройки флеш.
Краткий синтаксис класса SWFObject:
Quote
var so = new SWFObject(swf, id, width, height, version, background-color);
swf - Путь к плееру.
id - ID вашего объекта (что угодно можно указать).
width - Ширина плеера.
height - Высота плеера.
version - Требуемая версия флеш.
background-color - Цвет фона.
so.write('player');
Здесь указываем в каком месте загрузить плеер.
В конкретном примере плеер грузится между тегами
so.addParam('allowfullscreen','true');
Разрешить использовать полноэкранный режим.
Для выключения нужно установить false.
so.addParam('flashvars','file=video.flv');
А это вызов самого видео файла.
А сейчас об остальных настройках плеера.
Все настройки плееру передаются через so.addParam('flashvars','[...]');
Передача параметров происходит по принципу переменных в ссылках.
Например, если вам нужно чтобы при загрузке страницы видео начинало воспроизводится автоматически, нужно изменить наш пример так:
so.addParam('flashvars','file=video.flv&autostart=true');
То есть за автоматическое воспроизведение отвечает параметр autostart=true.
Параметры указываются через &.
Если в параметрах встречаются данные символы, их нужно заменять.
? > %3F
= > %3D
& > %26
Все файлы, которые можно вызывать в параметрах могут быть удаленными, то есть можно указывать полный адрес через http://
Переменные плеера JW FLV:
| Название | Описание | Возможные значения |
| | | |
| Общие переменные |
| image | Путь к файлу изображения, которое показывается в плеере, когда не идет показ видео(превью для видео) | |
| start(0) | С какой секунды начинать воспроизведение | |
| duration(0) | Максимальная продолжительность в секундах. Если не указать, воспроизводится до конца.
| |
| link | Ссылка. Если указать ссылку, то в панели плеера появится значек ссылки, при нажатии откроется указанная страница в браузере. | |
| file | Файл для показа в плеере(музыка mp3, изображение или видео). Либо плейлист. Про плейлисты ниже. | |
| | | |
| Цвета |
| backcolor | Цвет контрольной панели, на которой находятся кнопочки управления, а так же фон плейлиста. | |
| frontcolor | Цвет содержимого контрольной панели(кнопочки, тексты и т.д.), а так же цвет текстов в плейлисте | |
| lightcolor | Цвет некоторых элементов, например цвет громкости звука(включенного), цвет строки, показывающей пройденное время ролика после ползунка | |
| screencolor | Цвет фона дисплея плеера | |
| | | |
| Расположение |
| controlbar (bottom) | Расположение панели. | bottom-снизу
over-наложено на видео и исчезает при воспроизведении
none-нет панели. |
| playlist (none) | Расположение плейлиста. | bottom-снизу
over-располагается на дисплее, при начале воспроизведения исчезает до остановки видео,
right-справа,
none-нет плейлиста. |
| playlistsize (180) | Размер плейлиста. Если плейлист расположен справа, то это ширина плейлиста, если плейлист расположен снизу, тогда это высота | |
| skin | Путь к скину плеера. не много скинов можно скачать здесь http://www.longtailvideo.com/addons/skins | |
| | | |
| Действие |
| autostart (false) | Автоматическое воспроизведение после загрузки страницы | false-нет
true-да |
| bufferlength (1) | Буферизация перед стартом. Количество секунд, которые нужно скачать перед тем, как начать воспроизведение | |
| displayclick (play) | Действие, выполняемое при нажатии на дисплей плеера | play-воспроизведение/пауза
link-переход по ссылке указанной в параметре link
fullscreen-переход в полноэкранный режим
none-ничего не делать
mute-выключить звук
next-следующий ролик в плейлисте. |
| icons (true) | Показывать в центре экрана значек воспризведения и буферизации. | true-да
false-нет |
| item (0) | Номер ролика в плейлисте, который воспроизводится по умолчанию. отсчет начинается с нуля. | |
| logo | Картинка-логотип jpg, png или gif. В скине по умолчанию крепится в верхний правый угол, но в разных скинах это расположение может меняться | |
| mute (false) | Загрузка плеера с изначально выключенным звуком. | false-звук включен
true-звук выключен. |
| quality (true) | Включает улучшеное качество воспроизведения видео при загрузке. Можно переключать правой кнопкой мыши через меню. | true-включено
false-выключено |
| repeat (none) | Повтор роликов | list-показывает поочереди ролики в плейлисте и остановится при окончании плейлиста.
always-крутит все ролики в плейлисте по кругу без конца.
single-повторяет один ролик по кругу.
none-нет повтора |
| resizing (true) | Разрешить изменять размер видео в зависимости от размеров плеера. | true-да
false-нет |
| stretching (uniform) | Подгоняет размеры видео | exactfit-не пропорционально, заполняет весь экран по ширине и высоте.
uniform-пропорционально заполняет экран плеера, показывая всю картинку видео(заполняя большие стороны фоном).
fill-пропорционально заполняет весь экран по минимальным сторонам, уводя часть видео за пределы экрана.
none-не меняет размеры видео. |
| volume (90) | уровень звука плеера при старте. от 0 до 100 | |
| | | |
| Внешние переменные |
| abouttext | При нажатии правой кнопкой мыши будет виден этот тект, как владельца. Вносить сюда свой текст разрешается только при использовании коммерческой лицензии. | |
| aboutlink | Ссылка которая срабатывает при нажатии на тексте abouttext. Тоже менять запрещено без коммерческой лицензии. | |
Это почти все настройки, осталось несколько мелких переменных, о них не стал писать, так как не смог протестировать их.
Все переменные описаны здесь http://developer.longtailvideo.com/trac/wiki/FlashVars
Так же можно воспользоваться онлайн конструктором плеера.
Заполняя необходимые поля формы вы в онлайне создаете готовый код плеера для установки на своем сайте.
Конструктор http://www.longtailvideo.com/support/jw-player-setup-wizard
А сейчас не много о плейлисте.
Очень удобная вещь.
Можно загрузить не один ролик, а сразу несколько в пределах одного плеера.
Вот пример вывода плеера с плейлистом
so.addParam('flashvars','file=pl.xml&playlist=right');
Здесь уже в переменной file указывается не файл с видео, а xml файл плейлиста.
Пример xml файла плейлиста:
Code
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<TITLE>Example XSPF playlist for the JW Player</TITLE>
<info>http://developer.longtailvideo.com/trac</info>
<tracklist>
<track>
<TITLE>Название</TITLE>
<creator>-----</creator>
<info>http://www.webi.ru/</info>
<annotation>Описание</annotation>
<IMG>1.jpg
<location>m.flv</location>
</track>
<track>
<TITLE>Название2</TITLE>
<creator>------</creator>
<info>http://www.webi.ru/</info>
<annotation>Описание</annotation>
<IMG>2.jpg
<location>2.flv</location>
</track>
</tracklist>
</playlist>
Полный формат плейлистов можно найти тут http://developer.longtailvideo.com/trac/wiki/FlashFormats
Этот плеер понимает много форматов xml, я взял самый понятный и простой.
В данном примере два ролика, можете пихать сюда больше.
Как видите в плейлисте все понятно без лишних комментариев.
Самое главное, кодировка файла должна быть UTF-8.
Вот и все.
Установили и настроили видео.
Вот ссылки по теме.
Скачать JW FLV Media Player с нашего сайта
Сайт разработчиков плеера. Здесь несколько вариантов плееров.
http://www.longtailvideo.com/
JW FLV Media Player. Это ссылка конкретно на описаный плеер.
http://www.longtailvideo.com/players/jw-flv-player/
Описание переменных для so.addParam('flashvars','[...]');
http://developer.longtailvideo.com/trac/wiki/FlashVars
Онлайн конструктор.
Легкий способ создать необходимые настройки
http://www.longtailvideo.com/support/jw-player-setup-wizard
Форматы поддерживаемых файлов(плейлистов, видео, аудио, изображений)
http://developer.longtailvideo.com/trac/wiki/FlashFormats
Скины
http://www.longtailvideo.com/addons/skins
Правила создания своих скинов
http://developer.longtailvideo.com/trac/wiki/SkinningThePlayer
Сайт
Форум
Фотоальбом
Настройки
Расширенный поиск
Лента новостей
17.05.2010, Понедельник в 02:36
