Как вставить поточное видео на сайт? |
Вот такую интересную статью прочитала по этой теме:
11.02.2009
сайт автора: http://webi.ru
публикация данной статьи разрешена только со ссылкой на сайт автора статьи
Видео на сайте
Как организовать потоковое видео на своем сайте или проигрывание mp3 файлов?
В этой статье я расскажу как установить на сайте плеер и показывать свои ролики прямо с вашего сайта.
Разговор пойдет только об установке и настройке плеера, а уж как вы будете грузить файлы на свой сайт, это уже другая тема.
Существует два варианта установки видео на сайте.
1.
С использованием готовых сервисов, типа youtube.com.
Подойдет тем, у кого нет возможности размещать у себя большие видео файлы или есть ограничения трафика,
видео хранится на чужом сервере и показывается через чужой сервис, не потребляя ваших ресурсов.
Используя этот вариант вы должны быть готовы к тому, что любой из ваших файлов будет удален, либо сервис перестанет работать, либо.... причин много.
Чтобы воспользоваться этим вариантом вам достаточно зарегистрироваться на сервисе и закачать видео.
После этого вы можете установить на своем сайте выданный вам html код и ролик будет показываться на вашем сайте, но с логотипами или рекламой этого сервиса.
2.
Совершенно независимый вариант воспроизведения видео, музыки и изображений.
Все файлы хранятся у вас и воспроизведение тоже идет с вашего сервера(хостинга).
В этом случае вам нужно запастись ресурсами(трафик и свободное пространство) для файлов.
Этот вариант имеет только один минус, ресурсы.
Если у вас есть возможность размещать большие файлы и куча свободного трафика, конечно вы хотите этот вариант.
Вот об этом втором независимом варианте и расскажу.
Некоторые используют встроенные в систему плееры, и вызывают их с использованием специальной команды, но если кто-то посетит ваш сайт с другой операционной системой, то не увидит уже видео, так как в другой операционке этого плеера может и не быть.
Поэтому я рекомендую использовать плеер JW FLV Media Player.
Будет работать под любой операционной системой и в любом браузере.
Главное, чтобы в браузере был flash и javascript.
Этот плеер будет загружаться в браузер посетителя с вашего сайта.
JW FLV Media Player способен воспроизводить не только видео, но еще музыку и картинки.
На сайте разработчиков вы найдете всю необходимую информацию на английском, а так же разные версии проигрывателей.
JW FLV Player способен воспроизводить видео в формате FLV или MP4.
FLV достаточно распространный формат для воспроизведения потокового видео в интернете, очень подходит для наших целей.
Как создать FLV.
Для создания flv или MP4, вам потребуется конвертер.
В интернете можно найти большое количество конвертеров, например Total Video Converter.
Очень простой в работе конвертер, открываете любое видео в нем и выбираете в какой формат конвертировать, дальше он все сделает сам.
Если хотите, можете настроить качество конвертируемого видео в настройках.
Итак, видео сконвертировали, теперь скачивайте плеер JW FLV Media Player.
Из всех файлов нужны только player.swf и swfobject.js
Все остальное можно выбросить.
Загружайте эти два файла и видео куда-то на свой сервер.
Теперь просто втыкаете в нужном месте на странице такой html
<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>
Если вы все сделали правильно, то вы увидите черное окно плеера, при нажатии на воспроизведение начнет показывать видео.
Разбор этого кода.
<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');
А это вызов самого видео файла.
А сейчас об остальных настройках плеера.
Все настройки плееру передаются через 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 файла плейлиста:
<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>
<image>1.jpg</image>
<location>m.flv</location>
</track>
<track>
<title>Название2</title>
<creator>------</creator>
<info>http://www.webi.ru/</info>
<annotation>Описание</annotation>
<image>2.jpg</image>
<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
Источкник: http://webi.ru/webi_articles/10_17_f.html
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |