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

WeBinstruments

Инструментарий для веб-мастеров

Меню
  PHP скрипты
  Программы
  Документация
  Новости
  Статьи

Услуги
  Регистрация доменов

Контакты
  icq: 158325531
  email:
  все контакты: здесь

комментарии

Главная / Статьи / HTML / Как сделать потоковое видео на сайте.

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

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

14.03.2009 Дмитрий
я талкнулся с такой же проблемой, в свое время.

Это проблема сконфигурацией сервера вашего, думаю. Попробуйте проста скачать по HTTP и просмотреть.... если не открывает, то оратитесь к провайдеру чтобы прописал mime-type для FLF.
Как вариант написать свою настройку в .htaccess

15.03.2009 Ростиcлав
Здравствуйте, очень понравилась статья, для себя открыл, что плеер можно подгружать динамически с помощью скрипта, а не вручную. Скажите пожалуйста, возможно ли подгружать в один и тот же плеер другие flv-файлы с помощью обычных текстовых ссылок? Если в атрибут href писать url flv-файла, то браузер предлагает такой файл просто скачать. Если я правильно понимаю, необходимо этот адрес передать плееру. Не силен в JavaScript, если это несложно, приведите пожалуйста пример кода такой ссылки.

19.03.2009 админ
Вообще помоему должна быть встроенная фишка приема имени файла в ссылке, но я точно не помню.
Если намудрить на javascript то можно сделать так.
Вот функция для получения нужной переменной из ссылки
function getUrlVar(name)
{
name = name.replace(/[[]/,"[").replace(/[]]/,"]");
var regexS = "[?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if(results == null) return "";
else return results[1];
}
Теперь задать параметр можно так
so.addParam('flashvars',"file="+getUrlVar('file'));
И теперь вызываем в ссылку имя файла.
site/asd.html?file=video.flv

30.03.2009 Valeriy
Сервер на WIN 2003 (родной IIS).
Плевр не находит файл, файл в том же каталоге что и плевр. Пробовал указывать и через ../ и через http://... Результат тот же. Тыкните пожалуйста носом где и куда мне копать.

02.04.2009 alex
Valeriy, похоже на отсутствие mime-type для FLV

02.04.2009 finn101
Для того чтого Плеер находил файл, нужно в - *.xml файл вставить значение <file>*.mp3</file> притом файл как *.mp3 ,так и *.xml обезательно назвать цыфрой, тоесть 1.mp3, 2.xml

ВОТ ПРИМЕР
-----
1)ФАЙЛ *.HTML
000000000000000000
<html>
<head>

<title>Мой первый шаг </title>

</head>

<body>

<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=pl.xml&playlist=right&autostart=true&');

so.write('player');

</script
00000000
1)ФАЙЛ *.XML
------------
<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
<channel>
<title>Example RSS feed with jwplayer extensions</title>
<item>
<title>FLV Video</title>

<file>3.mp3</file>
<image>4.JPEG </image>

<description>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</description>
<enclosure url="D:23.mp3"type="video/x-flv " length="1192846" />
<jwplayer:author>the Peach Open Movie Project</jwplayer:author>

<jwplayer:type>lighttpd</jwplayer:type>
<jwplayer:duration></jwplayer:duration>

</item>
</channel>
</rss>

02.04.2009 Valeriy
alex
02-04-2009
похоже на отсутствие mime-type для FLV
_______________
Да. В этом была вся проблема.

03.04.2009 Valeriy
Создал файл play.asp который генерирует плейлист. В конце файла методом

ввожу файл со скриптлм плеера. Передаю в него плейлист и для проверки печатаю его под плеером (у меня это строка <% response.write dictEnvironment("LIST") %>).
Запускаю файл play.asp, он генерирует извлекая из базы Access плейлист, передает его в файл player.asp, где запускает плеер и выводит мой плейлист. Формат плейлиста что отображается на моей ВЕБ страничке полностью соответствует тому примеру что привел здесь автор статьи. Вроде все работает замечательно.
Далее нужно вставить в плеер мой плейлист. Пользуюсь примером из этого сайта:
Вместо: so.addParam('flashvars','file=pl.xml&playlist=bottom');
Ставлю:
so.addParam('flashvars','file=<% response.write dictEnvironment("LIST ") %>&playlist=bottom');

и естественно ничего не работает. Плейлист не отображается.
Вопрос: Можно ли плейлист подавать не с файла (в данном примере это pl.xml) а таким методом как я? Если да то что тогда писать вместо file= ?

19.05.2009 grizli
Скажите пожалуйста, как можно приспособить этот проигрыватель для воспроизведения онлайн видео с IP-камеры?
Спасибо!

26.05.2009 Sheva
Подскажите, если в курсе дела, если нет интернета как подгружать к примеру в локалке плагины? Они ведь подгружаются с plugins.longtailvideo.com как быть если выхода в интернет нет?
Понадобился показ субтитров а плеер в локалке их не желает подгружать бес соответствующего плагина. Просится в инет за плагином :)

26.05.2009 Sheva
Похоже здесь ответа мы не найдем. А жаль.

28.05.2009 Дмитрий
У меня не отображает почемуто:
This div will be replaced

var s1 = new SWFObject('/pl/player.swf','ply','470','320','9','#ffffff');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addParam('flashvars','file=http://content.longtailvideo.com/videos/flvplayer.flv');
s1.write('mediaspace');
(вот так отображает, хотя ставлю четко как написано и директории свои)
А через embed... другой плеер грузит - вчем дело подскажите

31.05.2009 wapec
Проблема, как и у Дмитрия постом выше - подскажите нам!

03.06.2009 Никита
А вот у меня такая проблема когда видео играет жмёш на паузу и сразу изчезает звук и ролик не останавливаетса а матает с большой скоростью вперёд ! помогите пожалуйста исправить ошибку чтобы ролик останавливался когда жмёш на паузу ! <br><br><script type="text/javascript" src="swfobject.js"></script>
<div id="http://filmsonline.do.am/_flv.swf">Здесь можно написать что то, если вдруг не будет грузится плеер. Возможно не включен flash в браузере.</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','600','400','8');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','file=http://filmsonline.do.am/_flv.swf');
so.write('http://filmsonline.do.am/_flv.swf');
</script>

03.06.2009 Влад
Этожэ очень лехко !

04.06.2009 Никита
Ну помог бы тогда если это лехко ! Выручите пожалуйста а то мне самому не как

10.06.2009 Барик
Люди будьте так любезны помоч тупоголовому как зделать 10 серий примерно в одном плеере
и если возможно поподробней а то я чайник в этом деле

22.06.2009 гисс
У меня при параметре start отличном от 0 начинает с нуля воспроизведение
s10731.addVariable('start','200');

1 2 3 4 5 6 7

Добавить свой комментарий

Партнеры

Магазин компьютерной техники - gps навигаторы.

WeBinstruments

Инструментарий для веб-мастеров

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

Комментарии

Добавить свой комментарий