MASTER-LIVE
- всё о заработке в сети Интернет 

Три способа как вставить видео на сайт

В последнее время добавление видео на сайт стало очень актуальным. На каждом третьем сайте в сети присутствуют видеоматериалы.

Люди добавляют к себе на странички видеоролики с описанием своих товаров или услуг, видеоматериалы потихоньку начинают использовать в качестве справки по тому или иному вопросу, появляются все больше и больше сервисов, предоставляющих возможности просмотра фильмов в режиме онлайн и.т.д. Короче говоря видео в сети процветает :)

Так как же вставить видео на сайт?

Вставить видео на сайт можно  разными способами, я бы хотел остановиться на трех из них:

СПОСОБ 1: Использовать сервис RuTube

Чтобы использовать данный сервис, необходимо сначала там зарегистрироваться. Для этого пройдите по ссылке http://rutube.ru/register.html и введите все необходимые данные.

После успешной регистрации, пройдите по ссылке "Залить видео" в верхней части экрана:

Рис 1. Как залить видео на Rutube

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

Рис 2. Форма добавления видео на Rutube

После заполнения всей формы и указания необходимого видеофайла жмем кнопку Загрузить. Когда загрузка файла закончится , необходимо подождать некоторое время, чтобы видео переконвертировалось в нужный формат. Спустя некоторе время, обновляем страницу, кликаем на изображение нашего ролика. Появляется окошко в котором можно посмотреть на то, что получилось, и забрать ссылку и код плеера. В данном случае нас интересует именно код.

Рис 3. Забираем код плеера на Rutube

Копируем код плеера, и вставляем к себе на сайт, в то место, где бы мы хотели видеть данный плеер. Если все сделали верно, то должен появиться плеер, с загруженным Вами видеофайлом. Размеры самого плеера можно поменять, они задаются в исходном коде плеера, параметрами height - высота и width - ширина.

Я загрузил небольшое видео этим способом, чтобы Вы посмотрели как выглядит плеер:

Как вставить видео на сайт с помощью сервиса RuTube мы разобрались.

СПОСОБ 2: Использовать сервис YouTube

Первым делом необходимо зарегистрироваться. Здесь иногда возникают проблемы. Если у Вас при попытке зарегистрироваться выдает ошибку мол "Извините. На основании информации, которую вы нам предоставили, вы не можете зарегистрироваться на YouTube.com" то возможны следующие пути решения:

1. При регистрации возраст указывайте более 18 лет, говорят мол у них там ограничения какие-то.
2. Если не помогло, то попробуйте зарегистрироваться используя другой браузер. Я, например, не смог зарегистрироваться через браузер Opera, а используя Internet Explorer зарегистрировался без проблем.

После успешной регистрации, переходим по ссылке Добавить Видео, в правом верхнем углу :

Рис 4. Добавляем видео на YouTube

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

Рис 5. Форма добавления на YouTube

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

Теперь в верхней части экрана, нажимаем на свой ник(логин под которым Вы зарегистрировались), выбираем "Мое Видео", затем жмем на уменьшенное изображение видео, и на открывшейся странице в правом верхнем углу копируем HTML код плеера, который затем вставляем к себе на сайт:

Рис 6. Забираем код плеера с YouTube

Вот как выглядит плеер от сервиса Youtube .

Думаю как вставить видео на сайт используя YouTube тоже понятно. Размеры плеера аналогично как и в первом способе задаются атрибутами height и width .

СПОСОБ 3: Используя сервис uppod.ru

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

Плеер сделанный данным способом не содержит намеков на то, что это чей то плеер(в предыдущих способах в плеерах видно что это мол Rutube или Youtube) . И еще, обратите внимание, что после окончания проигрывания видео в предыдущих двух способах, внутри плеера появляются предложения посмотреть другие видео на этих сайтах, т.е. возможна ситуация, когда ваш посетитель заинтересовавшись уйдет на этот самый YouTube или RuTube. И наконец, такой плеер будет меньше тормозить,т.к. видео грузится с Вашего сайта.

О возможностях данного плеера можете почитать здесь , или же посмотреть видео здесь . Вот что нужно сделать для установки этого плеера:

Как обычно, все начинается с регистрации. После нее делаем следующее:

1. Создаем в корне вашего сайта(там где лежит главная страница) три папки: video, styles, и player .
2. Скачиваем файл плеера, нажав по ссылке " Скачать плеер" в левом верхнем углу.
3. Распаковываем скачанный архив, берем оттуда файл плеера uppod.swf и закачивем в папку player на нашем сайте.
4. После этого, зайдя в свой аккаунт, переходим в верхнем меню на вкладку "Мой Плеер" и Нажимаем "Видео" .

Рис 7. Вкладка "Мой плеер" - "Видео"

1. Появится меню из трех пунктов Стили, Файлы и Плейлисты. Для начала нажимаем на Стили а потом на + (добавить) . Появится форма. в которую нужно ввести название стиля и нажать кнопку сохранить. Дальше появляется сам визуальный редактор, в котором мы и делаем необходимые настройки. После создания собственного стиля, жмем на кнопку сохранить, вновь переходим на вкладку "Мой плеер" - "Видео" - "Стили" выбираем наш стиль и скачиваем его.

Рис 8. Скачивание стиля плеера

1. Теперь скачанный файл стиля нужно закачать к нам на сайт, в папку styles.
2. В папку video у нас на сайте, нужно закачать наш видеофайл, у меня это файл prikol.flv .
3. Теперь переходим во вкладку Файлы, нажимаем на + и добавляем свой файл, указывая название, ссылку и стиль, в моем случае это выглядит так:

Рис 9. Добавление файла для проигрывания

1. Теперь необходимо проверить правильность путей. Для этого перейдите по ссылке "Настройка путей" в левом верхнем углу. Для моего случая пути прописаны так, у Вас конечно вместо zvirec.com будет что-то другое:)

Рис 10. Настройка путей

В данном случае, мы не используем плейлисты и поэтому не создавали папку pl

1. Ну и наконец чтобы забрать код, переходим в подменю "Файл" нажимаем на наш видеофайл, в данном случае "прикол", затем выбираем "Код" и копируем HTML код с полной поддержкой IE . Данный код вставляем на страницу сайта, где мы хотим видеть данный плеер.

Рис 11. Забираем код плеера с UPPOD.RU

Но так он выглядит с моим стилем, Вы же можете задать для него совершенно другой внешний вид, создав свой, подходящий под дизайн сайта, стиль.

Ну что ж, я показал Вам три основные способа добавления видео на сайт . Выбор уже за Вами ...

Как добавить аудио на сайт?

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

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

Также аудио плеер можно добавлять на сайт просто ради развлечения посетителей, или например для предоставления  возможности предварительного прослушивания песен, перед их скачиванием.

Мы рассмотрим как добавить аудио на сайт используя сервис UPPOD.RU

Итак последовательность действий:

1. Регистрируемся на данном сайте http://uppod.ru/auth/sign/
2. Создаем три папки в корне своего сайта(там где главная страница) - styles , player и audio.
3. Заходим в свой аккаунт, переходим на вкладку Мой Плеер, в левом верхнем углу нажимаем "Скачать плеер", затем распаковываем скачанный архив, достаем оттуда файл uppod.swf и закачиваем его к себе на сайт, в папку player.
4. Переходим на "Мой Плеер" затем "Аудио" затем "Стили " затем нажимаем на + и добавляем свой стиль, т.е. просто указваем его имя.
5. После создания собственного стиля, жмем на кнопку сохранить, вновь переходим на вкладку "Мой плеер" - "Аудио" - "Стили" выбираем наш стиль и скачиваем его, кликнут по ссылке скачать.
6. Скачанный файл стилей теперь необходимо закачать в папку styles у себя на сайте.
7. Как добавить аудио на сайт без самого аудио файла? естественно никак. Поэтому обязательно нужно закачать звуковой файл, который Вы хотите проиграть, в папку audio к себе на сайт. У меня это файл slovo.mp3.
8. Теперь переходим во вкладку "Файлы", нажимаем на + и добавляем свой файл, указывая название, ссылку и стиль. В моем случае, т.е. для домена zvirec.com , ссылка выглядит так: http://zvirec.com/audio/slovo.mp3
9. Теперь проверяем правильность путей. Для этого переходим по ссылке "Настройка путей" и проверяем: Для моего случая должно быть так:

Рис 1. Настройка путей

В рассматриваемом случае, мы не создавали папку pl , т.к. плейлисты не использовались .

1. Последний шаг к добавлению аудио на сайт, это копирование самого кода плеера. Чтобы забрать код, переходим по пути "Мой Плеер" затем "Аудио" затем "Файлы" выбираем нужный файл для проигрывания, в моем случае это "slovo" нажимаем "Код" и копируем код "HTML c полной поддержкой IE". Теперь осталось вставить его к себе на сайт.

Создаем горизонтальное выпадающее меню в 3 шага

В данном уроке мы научимся делать выпадающее меню, выполненное на связке CSS+HTML+JQuery .  Как оно выглядит можете посмотреть здесь …

Рассматриваемый тип выпадающего меню, легко настраивается и устанавливается на сайт. В данном меню используется  JavaScript-фреймворк  - JQuery , который в последнее время завоевал огромную популярность у вебмастеров.
По сути, разбираться в тонкостях его работы не обязательно.

Чтобы установить и настроить внешний вид меню, Вам понадобятся лишь небольшие знания html и css .

Итак давайте по-порядку:

ШАГ 1:

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

ШАГ 2: 

На страницы сайта, где будет размещаться данное меню,  между тегами <HEAD> и </HEAD> вставить следующий код:

<link rel="stylesheet" type="text/css" href="menu/jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="menu/jquery.min.js"></script>
<script type="text/javascript" src="menu/jqueryslidemenu.js"></script>

И непосредственно в тело документа, в то место, где будет находится само меню, вставить следующий HTML код :

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Справка</a></li>
<li><a href="#">О программе</a>
<ul>
<li><a href="#">Интерфейс </a></li>
<li><a href="#">Возможности</a></li>
<li><a href="#">Быстрые клавиши</a></li>
</ul>
</li>
<li><a href="#">Обучение</a>
<ul>
< li><a href="#">Уроки</a></li>
<li><a href="#">Видеоуроки</a>
<ul>
<li><a href="#">Работа с HTML</a></li>
<li><a href="#">Работа с CSS </a></li>
<li><a href="#">Работа с PHP</a></li>
</ul>
</li>
</ul><li><a href="#">Автоматизация</a></li>
<li><a href="#">Секреты</a></li>
</ul>
<br style="clear: left" />
</div>

В качестве элементов меню выступает обычный немаркированный список. Если нужно сделать вложение, то просто внутрь одного списка, вкладывается другой.
Естественно, количество пунктов меню и их содержание у Вас будет другое, но принцип остается тот же. Так же, в данном случае,  в атрибутах  href вместо реального адреса, указана так называемая заглушка (#), поэтому замените # на реальные адреса страниц.

ШАГ 3:

Настроить внешний вид меню конкретно под Ваши нужды. Это делается редактированием файла стилей jqueryslidemenu.css , находящегося внутри архива, скачанного на первом шаге.
Здесь также не должно возникнуть проблем, т.к. я внес свои комментарии в данный файл стилей , и разобраться будет совсем не сложно.

И наконец, если у Вас остались вопросы, скачивайте видеоурок ниже, там я рассказываю все тонкости по установке этого меню на сайт.

Рис.1 Скриншот из видеоурока по установке выпадающего меню

Скачать скрипт выпадающего меню

Скачать видеоурок "Создаем горизонтальное выпадающее меню в 3 шага"