HtmlGuide.ru

Воспроизводим видео на сайте с помощью своего плеера

Автор admin | Дата: 08.05.2008

Для того чтобы воспроизвести видео на вашем сайте, вы можете воспользоваться тегом <EMBED>, но в таком случае, у пользователя должно быть установлено соответствующее ПО на компьютере. В этой статье мы рассмотрим универсальный плеер, который сможет воспроизвести музыку, картинки, а главное видео файлы независимо от типа ОС, браузера и других параметров системы, т.к. сам плеер и видео будут расположены на хостинге.

Плеер носит гордое имя JW FLV MEDIA PLAYER. Последняя версия, которая доступна на сайте разработчика - 3.16, весит 854КБ. Преимуществ достаточно, для того, чтобы обратить на него внимание. Но, зачем мне ставить плеер для воспроизведения видео на сайте, когда я могу воспользоваться бесплатными сервисами, например Youtube, Rutube и другие? У всех них есть один существенный для меня недостаток, видео файлы находятся на их серверах, сам плеер тоже, т.е. вы автоматически зависите от этих площадок. А случиться, даже с такими крупными сервисами может все что угодно. От технических работ, переезда, до банального удаления вашего файла.

Плееру уже 4 года, как написано на сайте разработчика. За это время он претерпел серьезные изменения, но что радует, загрузить вы можете даже самую первую версию, правда воспроизводит она только mp3-файлы. В более поздних версиях плеера появлялись дополнительные возможности, среди которых, поддержка плейлистов, скринов для видео, настроек цвета для кнопок, меню, бара поиска видео на Yuotube и многие другие.

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

<div id=”container”><a href=”http://www.macromedia.com/go/getflashplayer”>Get the Flash Player</a> to see this player.</div>
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
var s1 = new SWFObject(”mediaplayer.swf”,”mediaplayer”,”300″,”185″,”8″);
s1.addParam(”allowfullscreen”,”true”);
s1.addVariable(”width”,”300″);
s1.addVariable(”height”,”185″);
s1.addVariable(”file”,”video.flv”);
s1.write(”container”);
</script>

Здесь, в блоке container, вы должны указать информацию для посетителя, если у него не установлен Flash Player. Далее, отредактируйте пути для файлов swfobject.js, mediaplayer.swf и видео video.flv

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

Несколько слов о формате flv. Просматривать данный формат умеет VLC media player, небольшая бесплатная утилита, а также другие проигрыватели, в частности тот, о котором идет речь в статье. Для создания такого видео вы можете воспользоваться многочисленными конвертерами. Пожалуй, это единственное, что можно отнести к недостаткам, хотя к небольшим, ведь все сервисы, которые предлагают просмотр видео роликов в интернете поддерживают данный формат.

А вот как выглядит этот плеер: