Шаг 1:
- Скачиваем внизу этой страницы архив с плеером и всем необходимым для его работы (можно скачать архив с офф-сайта, но я не сразу добился работоспособности новой версии, поэтому предлагаю свой архив);
Шаг 2:
- Собственно, распаковываем и берём с index.html следующий код:
var so = new SWFObject('player.swf','player','470','470','2','#');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addParam('flashvars','file=http://www.youtube.com/watch=CNbuvGO0FOI&provider=youtube&skin=beelden/beelden.xml');
so.write('preview');
Разбор этого кода.
<script type="text/javascript" src="swfobject.js"></script>
Загрузка вспомогательного класса, который упрощает использование флеш на сайте. Указывайте путь где лежит этот файл.
var so = new SWFObject('player.swf','mpl','400','250','8');
Указываем теперь этому классу где лежит плеер и задаем настройки флеш.
Краткий синтаксис класса SWFObject:
var so = new SWFObject(swf, id, width, height, version, background-color);
swf - Путь к плееру.
id - ID вашего объекта (что угодно можно указать).
width - Ширина плеера.
height - Высота плеера.
version - Требуемая версия флеш.
background-color - Цвет фона.
so.write('player');
Здесь указываем в каком месте загрузить плеер.
В конкретном примере плеер грузится между тегами
<div id="player"></div>
so.addParam('allowfullscreen','true');
Разрешить использовать полноэкранный режим.
Для выключения нужно установить false.
so.addParam('flashvars','file=video.flv');
А это вызов самого видео файла, может быть не только локальный, можно указать удаленный файл через http://.
so.addParam('flashvars','file=http://www.youtube.com/watch?v=O6ExAru7s58');
А вот так можно вызвать ролик youtube. Вместо имени файла указываете страницу youtube где размещен ролик.
so.addParam('flashvars','file=2x2.sdp&provider=rtmp&streamer=rtmp://213.21.0.16/2x2');
А вот так вызывается RTMP поток. Тут добавлены две переменные provider и streamer. О них ниже.
А сейчас об остальных настройках плеера.
Все настройки плееру передаются через 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, изображение или видео). Либо плейлист. Про плейлисты ниже.
provider - Указывает, какой тип данных будет обрабатываться. По умолчанию определяет тип по расширению файла, но если плеер не может опознать тип содержимого, можно указать вручную (video - стандартный видео файл FLV / MP4. sound - музыкальный MP3 файл.
image - JPG/GIF/PNG изображение. youtube - видео из YouTube. http - FLV/MP4 видео файл, воспроизводимый в псевдопотоке. rtmp - воспроизведение RTMP потока.)
streamer - Указывается RTMP канал для воспроизведения, например
file=2x2.sdp&provider=rtmp&streamer=rtmp://213.21.0.16/2x2
указан файл, тип содержимого и адрес канала
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-да)
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