Как встроить рекордер видео на ваш Squarespace веб-сайт

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

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

Если говорить конкретнее, то мы имеем в виду технологию Clipchamp, а именно предлагаемое ею HTML5 API для веб-камеры. Этот инструмент позволяет пользователем записывать видео прямо на странице любого веб-сайта.

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

Создание и добавление инструмента по записи видео на Squarespace сайт

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

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

Что касается места для загрузки, видео можно отправлять прямо на YouTube канал, в Dropbox, Google Disk, хранилище Amazon S3 или Microsoft Azure.

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

А теперь рассмотрим шаги, необходимые для встраивания инструмента по записи видео на ваше Squarespace сайт:

1) Войдите в интерфейс администратора вашего сайта

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

2) Во второй вкладке вашего браузера зарегистрируйтесь в пробной версии Clipchamp видео API

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

3) Установите ваш YouTube канал в качестве цели для отправки видео пользователям

После открытия пробной учетной записи в настройках API по адресу https://util.clipchamp.com/ru/api-setup/integrations нажмите YouTube и подключите Clipchamp API к вашей учетной записи в YouTube. Таким образом отправляемые вашими пользователями видеоролики будут попадать в указанный вами плейлист.

4) Далее перейдите по адресу https://util.clipchamp.com/ru/api-setup/install

На этой странице есть 2 фрагмента кода. Вам необходимо скопировать оба фрагмента в Squarespace (шаги 5 и 6 ниже), чтобы вставить рекордер веб-камеры и загрузчик на свой сайт. Вы можете игнорировать инструкции, упомянутые на самой странице, поскольку они применяются к сайтам, не относящимся к Squarespace.

5) Создайте новую страницу в Squarespace и откройте «Вставка кода в заголовок страницы»

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

6) Затем вставьте 2-й фрагмент кода в блок с кодом в разделе содержания вашей страницы:

Перейдите во вкладку редактирования страницы

и добавьте блок с кодом, там, где вы хотите, чтобы появилась кнопка записи видео.

Вставьте в этот блок код 2-го, большего по размеру, фрагмента кода, который вы можете скопировать с https://clipchamp.com/ru/api-setup/install.

Убедитесь, что блок с кодом имеет следующие настройки: «HTML» в выпадающем списке вверху справа и снятая галочка с опции «Отображать источник» вверху слева. Затем просто нажмите кнопку «Принять».

7) Затем, после добавления кода Clipchamp, сохраните и проверьте вашу страницу в действии

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

8) И наконец, верифицируйте ваш домен в настройках Clipchamp

Чтобы кнопка работала, вам нужно добавить в наш белый список домен вашего веб-сайта. Делается это в настройках API Clipchamp следующим образом:

Скопируйте URL-адрес своего веб-сайта и добавьте его в список разрешенных доменов в настройках API Clipchamp https://util.clipchamp.com/ru/api-setup/domains.

В нашем примере мы добавили в белый список домены clipchamp-test.squarespace.com и www.clipchamp-test.squarespace.com. Убедитесь, что вы тоже добавили свой домен как с субдоменом www., так и без него.

После добавления URL-адресов в список перезагрузите предварительный просмотр страницы Squarespace. Теперь видеозаписывающее устройство и кнопка загрузки видео на этой странице готовы к использованию, и ваши посетители могут начать отправлять свои новые записи и готовые видеоролики.

Демонстрация отправленных видеороликов на своем веб-сайте

Если вы хотите использовать на своем веб-сайте видеоролики, которые люди отправили вам и которые теперь находятся на вашем YouTube канале, то ознакомьтесь со следующими инструкциями в разделе помощи Squarespace. Здесь вы узнаете, как вставлять YouTube ролики в свои страницы.

встраивание видео в Squarespace

Итоги

Это все необходимые шаги для сбора видеороликов, если вы используете Squarespace. Обратите внимание, что мы также кратко изложили их в в статье нашей справки, которая доступна всем, у кого есть учетная запись в Clipchamp видео API.

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

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

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

Хотя эта публикация посвящена получение видеороликов со страниц Squarespace сайта, метод, который мы описали, также работает и на других платформах создания сайтов и CMS.

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