Видео на сайте

Я опишу 2 самых распространенных способа интеграции видео на сайт, а какой вам выбрать решать уже вам.

Итак, первый способ это вставка видео на сайт при помощи внешних сервисов, то есть вы закачиваете свой видеоролик на какой либо сервис типа Rutube, там вам дают код, который вы вставляете на свой сайт, благодаря которому все и происходит. Давайте рассмотрим основные плюсы и минусы данной технологии. Безусловным плюсом является то, что вы экономите на своем дисковом пространстве на хостинге, а так же не нагружаете сервер хостера, и простота, с подобной задачей сможет справится любой. Минусы здесь следующие, многие сервисы могут размещать какую либо рекламу на вашем видео ролике (перед началом просмотра, или какая либо бегущая строка, вариантов здесь много), и вы становитесь частично зависимым от данного сервиса поскольку ваши видеоролики будут хранится на их сервере, и вы получается зависите от работоспособности видеохостеров.

Способ второй, вы размещаете видео на своем сайте с помощью несложного скрипта и видеоплеера. Все это вы размещаете на собственном хостинге и соответственно со всеми вытекающими. Плюсы, все хранится у вас и вы всегда спокойны за свою информацию и ни какой левой рекламы в ваш видеоролик ни кто не добавит. Минусы, нагрузка на сервер, если посещаемость вашего сайта небольшая и какое либо видео будут смотреть до 10 человек одновременно, это не страшно, а вот если 30 и более, то вы сервер перегрузите и пользователи в итоге вместо хорошего видео получат хорошие тормоза…

В любом случае решать только вам как это будет реализовано, поскольку многие используют свои сервера с хорошей пропускной способностью и т.д. и им лучше использовать второй способ, кто-то максимально экономит на хостинге и ему подойдет только первый вариант…

Теперь я продемонстрирую, как исполнить и тот и другой метод. Начнем с первого, для начала нам надо зайти на RuTube, я выбрал этот сервис для примера поскольку он реально надежный и есть смысл с ним работать, переходим по ссылке http://rutube.ru/register.html, и заполняем несложную форму, после чего вам на ваш e-mail придет ссылка, перейдя по которой вы активируете свой аккаунт. Затем жмем на кнопку которая расположена в правом верхнем углу «Добавить видео”

и перед нами появится следующее:

Здесь все очень просто, в пером поле, вы находите свой видео файл, далее делаете его описание и т.д., выбираете категорию и жмете кнопку загрузить. Далее после того как ваш ролик загрузится вам система выдаст сообщение о его удачной загрузке на сервер, но ваше видео появится не сразу т.к. его будет обрабатывать в свой формат сам сервис, а это может занять даже несколько часов, когда как… Еще один важный момент обратите внимание на те форматы которые перечислены возле строки загрузки, так как если вы ошибетесь с форматом то ваше видео может вообще не загрузится, ну и соответственно не забывайте о максимальных размерах вашего видео. Едем дальше, теперь вам необходимо зайти в свой профиль, это сверху левее кнопки «добавить видео». Далее вы должны увидеть примерно следующее:

Здесь вы жмете по ссылке, на рисунке она отмечена красной стрелкой, и попадаете на просмотр своего видеоролика. Далее нам необходимо получить код, вставив который на свой сайт вы сможете показывать видео своим пользователям. Для этого жмем по закладке «Ссылка и код» как показано на рисунке:

Теперь просто копируете код и вставляете на свою страничку туда, где бы вы хотели увидеть ваше видео. Вот и все просто и понятно.

Движемся дальше и теперь я предлагаю разобрать второй более сложный способ. Для реализации данного способа нам понадобится специальный проигрыватель, я воспользуюсь FlowPlayer качайте и пользуйтесь, можете так же и в интернете поискать более свежую версию на официальном сайте здесь есть как бесплатная версия, так и платные варианты.

Далее распакуйте архив с плееров в какую либо папку на своем компьютере. Теперь давайте разбираться нам необходимо в корне своего сайта создать какую либо папку в которой у нас будут хранится файлы этого плеера, я для примера создал папку с названием fplayer. Далее в нее необходимо поместить следующие файлы:

Соответственно flowplayer-3.2.7.swf и flowplayer.controls-3.2.5.swf, далее из папки example нам необходимо так же взять файл flowplayer-3.2.6.min.js с Java скриптом и поместить его в ту же папку, что и первые 2 файла.

Все, теперь нам необходимо создать папку, в которой мы будем хранить видео, я назвал её Video для удобства и туда поместил свой видеофайл.

Далее осталось правильно разместить код на странице, где вы хотите увидеть свой видеофайл. Для этого в тег head добавляем следующий код:

<head>
<script type="text/javascript" src="fplayer/flowplayer-3.2.6.min.js"></script>
</head>

Тут главное не забудьте исправить адрес на вашу папку у меня она fplayer. Далее в том месте страницы где вы хотели бы увидеть видео, добавляем следующий код:

<a href="video/fl.mp4" style="display:block;width:520px;height:330px" id="player">
</a>
<script>
flowplayer("player", "fplayer/flowplayer-3.2.7.swf");
</script>

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

Дата публикации:2012-02-07

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!