Как сделать потоковое видео на сайте.

11.02.2009 (последний раз редактировалось 02.01.2012)
сайт автора: http://webi.ru
публикация данной статьи разрешена только со ссылкой на сайт автора статьи

Видео на сайте
Как организовать потоковое видео на своем сайте или проигрывание mp3 файлов?
Как транслировать онлайн вещания (rtmp потоки), а так же ролики из Youtube?

В этой статье я расскажу как установить на сайте плеер и показывать видео прямо с вашего сайта.
Разговор пойдет только об установке и настройке плеера, а уж как вы будете грузить файлы на свой сайт, это уже другая тема.

Воспроизведение видео на сайте делится на две основных части, трансляция RTMP потока и воспроизведение обычного файла.

1.
RTMP поток. Чаще всего используется для трансляции видео с вебкамер и трансляции телевидения в реальном времени. Иногда используется и для воспроизведения видеофайлов. RTMP канал транслирует информацию со скоростью воспроизведения, поэтому даже при воспроизведении файла его нельзя скачать целиком, можно только записать трансляцию со скоростью воспроизведения.

2.
Потоковое воспроизведение файла.
Обычный стандартный вариант воспроизведения видео. Файл скачивается частями (с вашего сервера или чужого) в буфер и показывается в плеере, то что скачалось.

Вот об этих двух вариантах и расскажу.
Некоторые используют встроенные в систему плееры, и вызывают их с использованием специальной команды, но если кто-то посетит ваш сайт с другой операционной системой, то не увидит уже видео, так как в другой операционке этого плеера может и не быть.
Поэтому я рекомендую использовать плееры JW FLV Media Player или TarantinovFLV.
Будет работать под любой операционной системой и в любом браузере.
Главное, чтобы в браузере был flash и javascript.
Плеер будет загружаться в браузер посетителя с вашего сайта.
JW FLV Media Player способен воспроизводить не только видео, но еще музыку и картинки.
На сайте разработчиков вы найдете всю необходимую информацию на английском, а так же разные версии проигрывателей.

JW FLV Player способен воспроизводить потоковое видео в формате FLV или MP4, а так же RTMP каналы.
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>

Пример локального воспроизведения файла

Пример воспроизведения ролика youtube

Пример воспроизведения RTMP

Если вы все сделали правильно, то вы увидите черное окно плеера, при нажатии на воспроизведение начнет показывать видео.

Разбор этого кода.

<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:

Это почти все настройки, осталось несколько мелких переменных, о них не стал писать, так как не смог протестировать их.
Все переменные описаны здесь 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

Интересное в сети:

meeting.clan.su - полно всего

indiancinema.clan.su - индийская тема

muztv.ucoz.ru  - теле видео музыкальный сайт

casino.clan.su - 3D игры мультиплеерные (многопользовательские) с людьми и ботами.

kino-top.ucoz.ru - киношный сайт - топ 100, фильмы и видео.

Как быстро и легко уснуть

Лечь на спину, вытянуться, расслабить все тело. Закрыть глаза и под закрытыми веками закатить зрачки наверх. Это нормальное состояние глаз во время сна. Приняв это положение, человек засыпает быстро, легко и глубоко. Если верить Виктору Суворову, этой методике десятилетиями обучают сотрудников ГРУ.

Как научиться рано вставать

Просыпаться в одно и то же время по будильнику, а засыпать, когда устал. Есть два подхода ко сну. Первый — ложиться и вставать в одно и то же время. Второй — засыпать, когда устал, и просыпаться, когда выспался. Чтобы научиться быть жаворонком, нужно суммировать эти два подхода. Этот способ, в частности, позволяет спать меньше, чем обычно: на самом деле человеку не нужно спать так много.

Как отмыть с рук запах чеснока и рыбы

При помощи любого предмета из нержавейки: воспользоваться им, как обычным куском мыла. Существует специальное стальное мыло, но обычная ложка работает точно так же.

Как добиться подписания нужного документа

Профессиональный трюк юристов: любой договор должен умещаться на одной странице — пусть без отступов, без пробелов, мелким кеглем. Работает и с любыми докладными записками, объяснительными и т.д.

Как показаться пьяным

Обычно все пытаются буквально изобразить пьяного: сбивчивая речь, шатающаяся походка и т.д. Гораздо более эффективный способ — попытаться изобразить очень-очень трезвого человека. Который очень медленно и осторожно двигается, контролируя каждое движение и каждое слово. Выглядит такая игра гораздо правдоподобнее.

Как вспомнить то, что не вспоминается

Если не получается вспомнить, скажем, сколько лет исполнилось ребенку приятеля, надо просто представить, сколько ему может быть. Скажите наугад. Очень часто мозг в такой ситуации расслабляется и подсовывает правильный ответ, который просто где-то застрял. Способ описан еще Фрейдом.

Как не пропустить ошибки в тексте

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

Как заказать выпивку в переполненном баре

Главное — дотянуться сквозь толпу до барной стойки и уцепиться за нее. Представьте, что вам нужно водрузить на стойку флаг. Остальное — дело техники: протиснуться, укрепиться, привлечь внимание бармена, четко выкрикнуть заказ, показывая на пальцах, сколько именно («Два пива!»). Держать в руках пару банкнот.

Как общаться с сотрудниками аэропорта

Если нужно срочно решить какую-нибудь проблему (скажем, перебронировать отмененный рейс), а не просто зарегистрироваться, всегда проще позвонить по мобильному в авиакомпанию, чем стоять в очереди к клерку-представителю: как минимум потому, что на горячей линии дежурят несколько операторов.

Как не отравиться в ресторанах

- Нью-йоркский повар Энтони Бурден советует с подозрением относиться к «специальным предложениям» и «блюдам от шеф-повара»: это может быть удобным способом сбыть залежавшиеся продукты.
- Осторожно есть в ресторанах, где мало посетителей. В холодильниках таких ресторанов скопилась куча продуктов с истекающим сроком годности. Редкий повар удержится от соблазна избавиться от них в первую очередь.
- С подозрением относиться к воскресным бранчам: с их помощью утилизируют все, что не съели в пятницу и субботу. Креветочный салат — это кладбище мертвых креветок. Рыба, вымоченная в бальзамическом уксусе, — это та рыба, которую уже нельзя просто пожарить на гриле. В воскресенье как никогда правдива старинная поварская поговорка: «Соус скрывает тысячу грехов».
- Не заказывать рыбу в понедельник: даже в городах с бодрыми рыбными рынками это будет, скорее всего, рыба, заказанная в четверг и не съеденная за выходные. Все это время она лежала в холодильнике, который открывали каждые две минуты.
- Рыбные поставщики практически никогда не заказывают рыбу-меч: в отличие от своих клиентов они видели трехметровых червей, которые в ней живут.
- В Москву рыба приходит по средам и субботам. Поэтому это лучшие дни для того, чтобы заказывать суши и сашими. Лосось из Шотландии приходит во вторник и пятницу, но его можно спокойно заказывать и в другие дни: лосось хранится дольше и лучше других рыб.

Как поменьше стоять в очереди

Правило крайней кассы: в самую дальнюю и труднодоступную кассу обычно стоит меньше всего народа. Не всегда, но часто работает в «Макдоналдсах», супермаркетах и на паспортном контроле.

Как отмыть пепельницу

Обработать их предварительно средством для полировки мебели.

Как резать лук без слез

- Положить луковицу на 10 минут в холодильник. Летучие дисульфиды, создающие характерный запах лука, и пропантиаль, который и вызывает слезы, не будут выделяться при резке так сильно.
- Смачивать нож холодной водой.
- Поставить рядом свечу: летучие соединения будут притягиваться пламенем. Также можно поставить рядом кастрюлю с кипящей водой (тогда их притянет пар) или же вентилятор — чтобы отгонять их в сторону.
- Жевать в процессе резки жвачку.

Как отбиться от бродячих собак

При помощи трехпроцентного раствора нашатырного спирта в пластиковой бутылке или водяном пистолете. В отличие от баллончика с перцем срабатывает всегда: собака на полчаса-час теряет ориентацию, особенно если удастся попасть струей в нос. Этот способ традиционно используют почтальоны.

Какие удары самые эффективные в драке

- Запомнить формулу «глаза-горло-пах». В пах бить так: поднять ногу почти на 90 градусов, а потом резко выпрямить в колене. В горло — это в кадык, фалангами пальцев. В глаза — пальцами, тыкать. Использовать подручные предметы: все, что с собой (ключи, зонт, ручка, зажигалка, сумка, книга), на себе (куртка, ремень), рядом (палки, булыжники). Полупустая пластиковая бутылка с колой может стать серьезным оружием.
- Ладонями по ушам. Достаточно сложный удар — сравнительно легко блокируется, но если попасть, секунд 15 человек вообще не будет понимать, что происходит.
- Удар в нос — на 3-5 секунд дезориентирует противника.
- Удар лбом в переносицу (он же «Варшава»). Часто после него драка сразу заканчивается. Как правило, переломом носа.
- Удар локтем в висок или челюсть. Наносится по касательной (как будто срочно понадобилось почесать спину), потом сразу назад — еще раз, в нос. Также в ближнем бою эффективны колени.
- Удар ногой по голени. Очень болезненный, особенно если на вас ботинки с крепким носом.
- Удар ногой сверху вниз по стопе. Противник рефлекторно сгибается, после чего нужно закончить комбинацию ударом коленом в нос.

Как разнять дерущихся псов

- Не пытаться разнимать шлепками или ударами: драка разгорится еще сильнее. Не размахивать руками перед собачьим носом: это опасно.
- Тем более не пробовать растащить за ошейники: можно оказаться покусанным собственной собакой.
- Самый проверенный способ: владельцы собак одновременно и резко дергают собак за задние лапы, отрывая их от земли. Собаки теряют равновесие и выпускают друг друга.
- Еще действеннее: перекрестив руки, схватить собак за задние лапы и, приподняв, перевернуть на спину. Живот оказывается незащищенным, и собаки разжимают челюсти.
- Накинуть на собак куртку или облить водой. Это можно сделать в одиночку. Щенков с той же целью бросают в сугроб.
- Если драка еще не разгорелась, можно попробовать, если не страшно, встать между собаками.
- Чтобы разжать челюсти — нажать на кадык, перекрывая дыхание.
- Кинуть в центр драки кошку — говорят, срабатывает.

Как реагировать, когда собака атакует тебя

Когда собака подбегает – присесть на корточки. У животного срабатывает программа – был большой – уменьшился, значит готовится к атаке. Защищающийся-же наоборот будет стараться показаться больше. А раз цель сама переходит в атаку, то лучше не лезть к ней. 99% случаев собака тут-же остановится, и, максимум, облает. Этим приемом пользуются бойцы спецназа.