Пространство сайтостроения. Как на сайт добавить видео


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

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

Инструкция содержит следующие разделы:

  1. Способы добавления видео на сайт
  2. Добавление видео через панель управления
  3. Добавление видео через панель инструментов
  4. Добавление видео с главной страницы модуля

Способы добавления видео на сайт

Существует три способа добавления видео на сайт:

  • Ссылка
  • Код
  • Файл

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

Ссылка

Указывается ссылка, которую можно скопировать из адресной строки с видеороликом. В данном случае используются технологии oEmbed. Поддерживаются сервисы Youtube.com, Rutube.ru, Vimeo.com, Dailymotion.com, Сoub.com.

  • Скопируйте ссылку на видео. Например, если вам понравилось видео http://www.youtube.com/watch?v=blO3Yb8nZ18, то необходимо на данной странице видео нажать на кнопку «Поделиться» — вкладка «Поделиться». Будет выведена ссылка http://youtu.be/blO3Yb8nZ18 (ссылку http://www.youtube.com/watch?v=blO3Yb8nZ18 тоже можно использовать). 
  • Скопированную ссылку пропишите на вкладке «Добавить ссылку» — «Ссылка на видеоролик» (подробнее рассмотрим ниже).
  • После прописывания ссылки подождите несколько секунд и пройдите авторизацию в Google, после этого данные будут получены.
  • Выберите категорию видео, заполните дополнительные поля (если нужно), нажмите «Добавить видео». Теперь это видео доступно и на вашем сайте.

Код

Некоторые хостинги предлагают размещать видео на своих сайтах с помощью HTML-кодов плееров. В коде видеоролика можно указывать IFRAME-, EMBED-, SCRIPT-элементы. Однако в целях безопасности мы используем свою базу сервисов, которые можно использовать в данной вкладке. 

Список доступных сервисов: 

  • youtube 
  • youtu 
  • rutube 
  • vkontakte 
  • \bvk\b 
  • player.vimeo 
  • video.mail 
  • video.yandex 
  • dailymotion 
  • pub.tvigle 

Данная база пополняется. Предложить видеосервис, которого ещё нет у нас в базе, вы можете в теме http://forum.ucoz.ru/forum/54-41178-1.

Перейдите на страницу видео. Под плеером кликните «Код для блога» (или «HTML-код»). После этого вам будет выдан код. Например: 

<iframe src="http://rutube.ru/embed/1046208" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>

Полученный код пропишите в поле «Код для вставки видео» и заполните остальные поля. 

Файл

Если у вас есть видеоролик, который вы хотите опубликовать на сайте, выбирайте этот вариант. Потребуется подключить аккаунт Youtube. 

Чтобы пользователи могли загружать свои файлы через форму на сайте в панели управления («Видео» / «Настройки» / «Материалы») нужно включить опцию «Загрузка материалов на YouTube». Для добавления файла через панель управления включать эту опцию не требуется.

Все видео, которые вы будете загружать со своего компьютера, будут автоматически в данном сервисе (Youtube). Автоматически получаются данные: 

  • Код видеоролика 
  • Скриншот видеоролика 
  • Название видеоролика

Добавление видео через панель управления

В панели управления сайтом выберите модуль «Видео» из списка:

 

На открывшейся странице нажмите на кнопку «Добавить»:

Откроется окно выбора способа добавления видео (способы мы рассматривали выше):

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

 

Все поля можно условно разделить на части: «Основное», «Подробности», «Дополнительные поля», «Опции», «Прочее», «Фильтры», «SEO».

Основное

  • Категория. В зависимости от выбранного набора предустановленных категорий указывается категория для материала. Категория является обязательным для заполнения полем. Материал может относиться одновременно к нескольким категориям. Данная возможность активируется в настройках модуля опцией «Вхождение материала сразу в несколько категорий».
  • Название материала. По умолчанию является текстом ссылки на добавляемое видео в каталоге и помещается в переменную $TITLE$. Является обязательным для заполнения полем.
  • Описание материала. Отображается рядом со ссылкой на сайт. Для вывода описания в шаблоне используется переменная $BRIEF$. Является обязательным для заполнения полем.
  • Канал. Каналы позволяют фильтровать видео. По умолчанию видео добавляется в канал пользователя. Данный способ добавления видео позволяет выбрать созданный ранее канал, который не является пользовательским.
  • Скриншоты. Изображения, которые выводятся в списке видеозаписей, а также на странице видео.

Подробности

  • Год создания видео. 
  • Актеры. Список актеров через запятую. Выводится с помощью переменной $ACTERS$.
  • Режиссер. Публикуется с помощью переменной $PRODUCER$.
  • Автор. Произвольное имя и/или фамилия автора материала ($AUTHOR_NAME$).
  • Email автора. Может быть показан на сайте с помощью переменных $AUTHOR_EMAIL$ и $AUTHOR_EMAIL_JS$. Во втором случае JavaScript препятствует копированию email-адреса роботами и скриптами, что снижает риск возникновения спам-писем по указанному адресу после добавления видео.
  • Сайт автора. Ссылка на сайт автора материала. Будет опубликована на странице видео с помощью переменной $AUTHOR_SITE$.
  • Длительность материала. Определяется автоматически, но может быть задана вручную. Публикуется на сайте с помощью переменной $DURATION$.
  • Качество видеоматериала. Можно указать любое значение, но обычно используются общепринятые. Выводится с помощью переменной $VQUALITY$.
  • Теги материала. Слова или словосочетания, которыми можно охарактеризовать сайт. Теги указываются через запятую и участвуют в поиске материалов на сайте. Указав значение тега в поиске, можно найти все материалы, содержащие данный тег. Переменная $TAGS$.
  • Язык.
  • Дополнительное поле 1...N. Подключить дополнительные поля можно в настройках модуля. Изменить названия — с помощью инструмента «Замена надписей».

SEO

  • HTML-заголовок страницы. Используется в переменной $USER_TITLE$. Так могут быть выведены разные названия для видео на странице сайта и на вкладке браузера.
  • Meta description. Явно заданное meta-описание видео. Выводится с помощью <?$META_DESCRIPTION$?>.
  • Использовать ЧПУ (человеко-понятный-урл). Часть ссылки на страницу видео.

Опции 

  • Комментирование. Включает/отключает возможность оставлять комментарии к видео.
  • Материал недоступен для просмотра (премодерация). Включает/отключает возможность просмотра материала пользователями. При включении данной опции материал после добавления неактивен (скрыт).

Фильтры

Поля со значениями фильтров появляются после создания фильтров.

Когда закончите заполнять все поля материала, нажмите на кнопку «Добавить», и видео появится в списке:

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

Откроется страница добавления видео:

Выберите способ добавления видео (способы мы рассматривали ранее). Для внесения данных о видео нажмите на ссылку «Дополнительно»:

Пользователи могут выбирать, нужно ли публиковать видео в их пользовательском канале:

Если нажать на логин пользователя, появится окно с настройками канала:

Можно изменить название и описание канала, а также прикрепить скриншот к каналу. Страница канала позволяет оставлять комментарии. Для этого нужно активировать настройку «Позволить оставлять комментарии». Чтобы узнать больше о каналах, читайте инструкцию.

Нажмите на кнопку «Добавить видео», и новый материал будет добавлен на сайт.

Чтобы изменить состав полей при добавлении видео, зайдите в настройки модуля «Видео» и в разделе «Материалы» добейтесь желаемого результата:

Добавление видео с главной страницы модуля

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

http://example.com/video/viadd 

Чтобы ссылка появилась в шаблоне, добавьте в него следующий код:

<?if $ADD_ENTRY_LINK$?><a href="$ADD_ENTRY_LINK$">Добавить материал</a><?endif?>

При переходе по этой ссылке откроется страница добавления видео.

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

www.ucoz.ru

Как добавить видео на сайт Ucoz с YouTube

6Здравствуйте, друзья! В этой статье вы узнаете как добавить видео на сайт Ucoz.

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

Видеофайлы, добавляемые на страницы, должны иметь формат SWF, то есть представлять собой Flash-ролики, а аудиофайлы — формат МРЗ.

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

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

Смотрим пример как добавить видео на сайт Ucoz

Чтобы добавить видео на сайт Ucoz, необходимо сначала определить его источник. Это может быть другой сайт, содержащий мультимедийный контент, или же мы можем добавить на сервер собственный SWF-файл, пользуясь файловым менеджером. Рассмотрим последнюю возможность подробнее.

1. Перейдите на страницу сайта Ucoz и, если это еще не сделано, авторизуйтесь на нем под учетной записью с административными правами.

2. Выберите команду админ-панели «Мультимедиа > Загрузить видео (.swf)», при этом откроется файловый менеджер.

61

62

3. Нажмите кнопку «Обзор» и с помощью стандартного окна выбора файла для добавления укажите видеофайл на локальном компьютере.

4. Нажмите кнопку «Загрузить файл», и через некоторое время добавленный файл отобразится в окне «Файловый менеджер».

63

5. Нажмите кнопку «Ссылка к файлу» в виде восклицательного знака в кружке и в отобразившемся окне «Запрос пользователю» скопируйте в буфер обмена ссылку на загруженный файл.

64

6. Нажмите кнопку «ОК», перейдите на страницу сайта и выберите команду админ-панели «Конструктор > Включить конструктор».

7. Методом, описанным ранее в этой статье, добавьте на страницу Ucoz новый блок и поместите в одну из колонок.

8. Нажмите кнопку настройки параметров добавленного блока, появится окно «Управление содержимым блока».

65

9. Нажмите кнопку «Video», появится страница вставки видео на сайт Ucoz в добавляемый блок.

66

10. Вставьте в поле «Подключение видео» ссылку на загруженный сайт и нажмите кнопку «Применить». Вернувшись на страницу сайта, щелкните на названии «Новый блок» и измените его на какое-либо другое, соответствующее видео.

11. Выполните команды «Конструктор > Сохранить изменения», чтобы сохранить изменения и выйти из режима конструктора. В результате в добавленном блоке отобразится добавленное видео на сайт Ucoz.

67

Как добавить видео на сайт Ucoz с YouTube

В поле окна добавления видео на страницу (где вы вводили прямую ссылку к файлу .swf), вы можете ввести адрес страницы с выбранным клипом на сайте YouTube. В этом случае в блоке отобразится нечто подобное.

68

Заметьте, что если вы просто скопируете код, предоставляемый YouTube для вставки клипов, в содержимое вкладки HTML в окне «Управление содержимым сайта», то вы должны будете настраивать параметры проигрывателя клипа самостоятельно, если его размеры будут слишком велики.

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

69

При ее выполнении отображается окно «Подключение видео» с полем для ввода адреса страницы или Flash-файла.

610

Введите в поле «Адрес страницы или Flash-файла» ссылку на видео. В полях ВВ code (ВВ-код) и JavaScript code (Код JavaScript) отобразятся коды для последующей вставки их в код страниц сайта.

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

Похожие записи

seo-dnevnik.ru

Как вставить видео на сайт WordPress

Последнее обновление:30/06/13

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

Только-только опубликовала статью «Как вставить картинку на сайт WordPress» и решила обновить WordPress.  А в новой версии, естественно, новшества. Например, разработчики порадовали сообщением, что они улучшили функцию вставки медиафайла. Вот сейчас и проверим.

Итак, начинаем с админ панели, затем «Записи» → «Добавить запись». Откроется страничка добавления записи (у блоггеров это называется пост или статья):

вставить видео

Нажимаем на кнопку «Добавить медиафайл».

Как вставить видео на сайт с компьютера

Выбираем на компьютере видеофайл. Открывается вся медиа библиотека, в которой отмечен один файл: наше загружаемое видео. С правой стороны мы видим процесс загрузки. Когда загрузка завершится, можно заполнить «Детали вложения»:

видео на сайт

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

video3

Ниже еще одно поле: «Настройки отображения вложений». Здесь можно выбрать, будет ли являться видео ссылкой на какую-то страницу. Я выбираю «Нет» и нажимаю «Вставить в публикацию». В статье появляется ссылка на этот видеофайл (на его адрес на нашем хостинге: …wp-content/uploads/2013/05/).

Как вставить видео на сайт из интернета (по адресу URL)

Нажимаем «Добавить через URL» и в рамку копируем адрес видео из интернета.

Я покажу процесс вставки на примере видео с YouTube.

1 способ:

вставить видео

Ниже окна просмотра видеоролика на YouTube мы видим разные ссылки, в том числе «Поделиться». Жмем на нее, и ниже появляется рамочка с адресом. Копируем этот адрес и вставляем в рамку добавления адреса.

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

В рамку ниже копируем заголовок и нажимаем кнопку «Вставить в публикацию», расположенную справа-снизу.  В нашей статье появилась ссылка на видео с YouTube.

2 способ: как я сама вставляю видео с YouTube

После нажатия на ссылку «Поделиться» появляются еще ссылки, и среди них «HTML-код». Нажимаем на эту ссылку. Ниже в рамке появится код, который надо скопировать и вставить в статью, перейдя в режим «Текст».

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

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

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

Как вставить аудио на сайт? Смотрите, как вставить видео на сайт, и делайте так же.

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

Это тоже интересно:

mojbiznes.ru