Как добавить видео на сайт
Инструкция содержит следующие разделы:
- Способы добавления видео на сайт
- Добавление видео через панель инструментов
- Добавление видео с главной страницы модуля
- Создание приложения для загрузки своих видео в Youtube
Способы добавления видео на сайт
Существует три способа добавления видео на сайт:
- Ссылка
- Код
- Файл
Все три способа актуальны при добавлении ролика через панель инструментов или с главной страницы модуля. В панели управления видео добавляется по ссылке или коду.
Ссылка
Указывается ссылка, которую можно скопировать из адресной строки с видеороликом. В данном случае используются технологии 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 width="640" height="360" src="http://rutube.ru/embed/1046208" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
Полученный код пропишите в поле «Код для вставки видео» и заполните остальные поля.
Файл
Если у вас есть видеоролик, который вы хотите опубликовать на сайте, выбирайте этот вариант. Потребуется подключить аккаунт Youtube.
Чтобы пользователи могли загружать свои файлы через форму на сайте в панели управления («Видео» / «Настройки» / «Материалы») нужно включить опцию «Загрузка материалов на YouTube». Для добавления файла через панель управления включать эту опцию не требуется.
Все видео, которые вы будете загружать со своего компьютера, будут автоматически в данном сервисе (Youtube). Автоматически получаются данные:
- Код видеоролика
- Скриншот видеоролика
- Название видеоролика
Добавление видео через панель инструментов
Панель инструментов содержит раздел, который позволяет быстро переходить к добавлению видеоматериалов на сайт. Нажмите на иконку «+» и выберите модуль, в который хотите добавить материал:
Откроется страница добавления видео:
Выберите способ добавления видео (способы мы рассматривали ранее). Для внесения данных о видео нажмите на ссылку «Дополнительно»:
Пользователи могут выбирать, нужно ли публиковать видео в их пользовательском канале:
Если нажать на логин пользователя, появится окно с настройками канала:
Можно изменить название и описание канала, а также прикрепить скриншот к каналу. Страница канала позволяет оставлять комментарии. Для этого нужно активировать настройку «Позволить оставлять комментарии». Чтобы узнать больше о каналах, читайте инструкцию.
Нажмите на кнопку «Добавить видео», и новый материал будет добавлен на сайт.
Чтобы изменить состав полей при добавлении видео, зайдите в настройки модуля «Видео» и добейтесь желаемого результата:
Добавление видео с главной страницы модуля
В шаблоне страниц каталога может быть размещена ссылка, ведущая на страницу добавления видео. Ссылка имеет следующий вид:
http://example.com/video/viadd
Чтобы ссылка появилась в шаблоне, добавьте в него следующий код:
<?if $ADD_ENTRY_LINK$?><a href="$ADD_ENTRY_LINK$">Добавить материал</a><?endif?>
При переходе по этой ссылке откроется страница добавления видео.
Создание приложения для загрузки своих видео в Youtube
Первое, что вам необходимо для создания приложения, перейти на сайт Google: https://console.cloud.google.com/projectcreate если у вас еще нет там созданных проектов, нужно содать новый.
Заполнить поле Project name (1) и клик по кнопке CREATE (3)
Дождитесь создания проекта (об этом будет информировать открывшийся список уведомлений и лоадер возле названия проекта) и нажать кнопку SELECT PROJECT в шторке уведомлений.
В секции Getting Started выбрать пункт Explore and enable APIs и перейти по нему:
после перехода по ссылке вы попадете на страницу со списком включенных АПИ для проекта, естественно он у вас будет пустым, клик по кнопке ENABLE APIS AND SERVICES (1)
вы попадете в Библиотеку апи гугла, здесь вам нужно найти два апи и включить их:
- Google People API - вводите в поиск, находит его, открываете и жмем кнопку Enable (1)
- YouTube Data API v3 - после включения предыдущего АПИ, попадете на его страницу у себя в проекте, далее идете в Library (1) и повторяете те же действия по включению АПИ, что и выше для предыдущего.
После включения необходимых АПИ, необходимо настроить OAuth consent screen - переходим на страницу настроки (1)
выбираем тип использования - External (1) и жмем CREATE (2).
Заполняем все необходимые поля для создания приложения:
- App name (напишите название на английском, можно вписать имя домена без зоны).
- User support email (напишите ваш email).
- App logo (загрузите ваше лого для приложения).
- Authorized domains (нажмите по кнопке ADD DOMAIN и пропишите домен какой вы используете на сайте).
- Developer contact information (пропишите ваш email).
Далее нажмите по кнопке SAVE AND CONTINUE (9) для сохранения введенной информации в заполненных нами полях.
Следующий шаг - необходимо выбрать соответствующие нашему функционалу области действий Scopes, переходим по кнопке ADD OR REMOVE SCOPES (1):
В списке скоупов необходимо выбрать чекбоксами следующие скоупы и нажать кнопку UPDATE (5):
- userinfo.email
- userinfo.profile
- youtube
- youtube.upload
Чтобы на одной странице увидеть все скоупы, в пункте Rows per page выберите значение 50 и далее отметить те которые перечислены в списке выше.
На этапе настройки скоупов списки выбраных обновятся после чего жмем кнопку SAVE AND CONTINUE (1).
Следующий шаг - это добавление тестовых пользователей, которым будет доступ для авторизации и аплоада файлов в Ютуб.
Примечание! Если приложение не валидировать и оставить в режиме теста, тогда нужно этот шаг заполнить своими профилями, или например профилями модераторов, которые добавлять будут контент. Для каждого пользователя нужно лишь добавить его email аккаунта которым он зарегистрирован в Youtube, остальную информацию гугл найдет в аккаунте автоматически.
Заполняем, добавляем пользователей и жмем кнопку SAVE AND CONTINUE (4)
Далее нам нужно настроить учетные данные - credentials, кликаем по пункту меню Credentials (1) и переходим на страницу их настройки.
На странице Credentials жмем кнопку Create credentials (1) - OAuth client ID (2).
На странице создания OAuth client ID выбираем тип приложения - Web application (1) и заполняем оставшиеся поля:
- в поле Authorized JavaScript origins необходимо добавить основной домен сайта
- в поле Authorized redirect URIs необходимо добавить redirectURI из настроек модуля Видео в форме Настройки приложения (3)
далее переходим по кнопке CREATE (1).
После создания Credentials откроется попап с их данными, поочередно копируем Client ID и Client secret в настройки модуля Видео и сохраняем изменения (1).
Немного про модерацию и верификацию приложения. Если оставить приложение в стадии Testing, а оно в данной стадии по умолчанию после создания, тогда в модуль видео смогут загружать видео лишь те пользователи, которых вы добавили в вкладке OAuth consent screen по кнопке ADD USER.
Если вам нужно, чтобы все могли добавлять / загружать видео в модуле, нужно пройти верификацию приложения. В вкладке "OAuth consent screen" ищем пункт Publishing status, увидите Testing и кнопку PUBLISH APP, после нажатия которой вам нужно подтвердить переключение с тестового в публичный и пойдет запрос в Google на верификацию.
На этом этапе настройка завершена, далее уже идем на свой сайт и проходим авторизацию и добавление видео на странице /video/viadd.
Важно! Для корректной работы приложения, ваш сайт должен быть с SSL сертификатом и быть доступным по HTTPS. В процессе создания приложения и заполнении всех полей домен и адрес сайта вводится именно с https.