A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Видеоплеер для сайта – в прошлой статье, мы с Вами рассмотрели самый простой способ, добавления видео на сайт.

Этот способ заключался в использовании Интернет ресурсов, которые позволяют размещать у себя Ваше видео.

Чтобы добавить видео на свой сайт, вы сначала закачиваете  видео на выбранный сервис.   Далее, Ваше видео  публикуется на web станицах  сервиса. 

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

В данной статье, мы рассмотрим другой способ добавления видео на сайт.

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

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

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

Из статей  – “как добавить аудио  и  “Плеер для сайта – тег OBJECT”, мы с Вами знаем, что для вывода в окно браузера внешних объектов,  таких как видео, аудио и Flash, в html используются теги EMBED и OBJECT.

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

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

Мы воспользуемся услугами того же сервиса,  который мы использовали при создании html кода для аудио плеера. Сервис расположен по адресу - http://flv-mp3.com. Как это сделать читаем дальше.

Итак, заходим на сайт http://flv-mp3.com и в первую очередь, скачиваем видеоплеер, кликнув по ссылке “Скачать” на главной странице сервиса.

В результате мы закачаем архив с видеоплеером uflvplayer.rar.  Из архива мы извлечем файл видеоплеера - uflvplayer_500x375.swf.

Данный плеер воспроизводит на сайте файлы с расширением  .flv. 

Поэтому, если у вас видео записано в другом формате, то его необходимо соответствующим образом подготовить, а именно, конвертировать в flv файл.

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

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

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

Как я указывал выше,  соберём html код, воспользовавшись сервисом  flv-mp3.com.

Для этого, вновь обращаемся к главной странице сервиса, где кликаем ссылку “Собрать”. Перед нами откроется окно, в котором  необходимо  заполнить поля и выбрать различные опции видеоплеера.

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

Здесь следует отметить, что сервис flv-mp3.com, позволяет Вам воспользоваться  видеоплеером, который расположен на хостинге сервиса. Для того чтобы воспользоваться данной услугой, уже указанный путь к swf-файлу видеоплеера, Вам менять не нужно.

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

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

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

Когда все поля заполнены и нужные опции отмечены, можно нажать на кнопку “Собрать и получить html код”. Далее копируем собранный html код и добавляем на свою страницу.

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

Автор: Виктор Милованов

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации