В ранней публикации этого года мы показали вам как сделать использование видео на вашем 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. Главным требованием для всех из них является то, что вам нужно разрешить добавлять пользовательский код на страницы в настройках администратора вашего сайта.
