На этой странице
В прошлой публикации мы показали вам, как конвертировать видеофайлы и уменьшать их размер таким образом, чтобы вы могли легко их использовать в вашем Wix блоге или на вашем веб-сайте.
Прошлая публикация была связана с вашими собственными видеофайлами и дизайном вашего веб-сайта, в этой же публикации мы покажем вам как вы можете встроить в свой ресурс инструмент по записи видео, чтобы получать видеоролики от посетителей вашего сайта.
Скриншоты ниже иллюстрируют шаги в системе Wix, однако описанный здесь метод также применим и для других платформ создания веб-сайтов с случае, если у вас есть возможность добавлять собственный код в ваши страницы.
Создание и добавление видео рекордера в Wix
С помощью этого инструмента пользователи смогут либо записывать видео со своей веб-камеры непосредственно на вашем Wix веб-сайте, либо же вы можете дать им возможность загружать видеофайлы, которые у них уже есть на компьютере или мобильном устройстве.
В обоих случаях видеофайлы можно отправить на YouTube канал, в Dropbox, Google Drive, хранилище Amazon S3 или Microsoft Azure. Если вы хотите легко встраивать полученные таким образом видеоролики на своем веб-сайте после того, как пользователи загружают их вам, то отправка файлов на YouTube канал является наиболее выгодным вариантом, так как вы можете вставлять YouTube ролики с помощью редактора Wix.
Для установки видео рекордера в Wix мы будем использовать наше HTML5 видео и JavaScript API для веб-камеры. Это виджет, который вы можете встроить на веб-сайт для получения видеороликов от пользователей и посетителей сайта. Хотя он доступен для веб-сайтов любого типа, для его запуска и работы на Wix сайте требуются сделать следующее.
*************As recommended by Wix, the best way to embed a recording and video uploading widget like the Clipchamp API is via backend code, see https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.
A developer or software engineer in your team or at your web agency will be able to follow these instructions in combination with the steps described at https://help.clipchamp.com/collect/getting-started/initial-setup-of-the-clipchamp-api.
*************A 2nd method using Custom Code blocks in the frontend of your website is described below. Note that it might not work in some circumstances, if that is the case then the method recommended by Wix through the backend code of your site is the best alternative.**************
1) Войдите в систему управления вашим веб-сайтом Wix
Вам необходимо будет на более позднем этапе создать образец новой страницы и скопировать код в ее HTML-настройки.
2) Во второй вкладке вашего браузера зарегистрируйтесь в пробной версии Clipchamp видео API
Регистрация в нашей системе API необходима для получения API ключа, который вам понадобится в следующем шаге для активации удаленного хранилища, в которое вы будете получать записываемые или загружаемые видеоролики. Вам не нужна кредитная карта для регистрации, и вы можете отменить пробную версию в любое время.
register-clipchamp-trial
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 фрагмента кода. Вы можете игнорировать инструкции, упомянутые на самой странице, поскольку они применяются к сайтам, не относящимся к Wix. Вам же просто необходимо скопировать оба фрагмента в HTML-редактор вашей новой веб-страницы в Wix.
5) Создайте новою страницу в Wix и откройте «HTML настройки»
В HTML редакторе вставьте первый фрагмент кода со страницы настроек Clipchamp, как это показано ниже:
6) Затем скопируйте и вставьте второй фрагмент кода непосредственно под первым фрагментом в том же редакторе HTML
7) Затем сохраните и просмотрите страницу, в которую вы вставили вышеуказанные фрагменты кода.
Если фрагменты кода были добавлены правильно, то на странице предварительного просмотра должна появиться новая кнопка для записи видео. Ура!
8) И наконец, верифицируйте ваш домен в настройках Clipchamp
Чтобы кнопка работала, вам нужно добавить в наш белый список 2 домена. Делается это в настройках API Clipchamp следующим образом:
1-й домен: Скопируйте URL-адрес, который использует Wix, чтобы показать встроенную кнопку Clipchamp на вашей странице Wix и добавить ее в список разрешенных доменов в настройках API Clipchamp https://util.clipchamp.com/ru/api-setup/domains.
Обратите внимание, что это не URL (или «домен»), который отображается в адресной строке вашего браузера (мы предполагаем, что вы используете Chrome), но это URL-адрес iframe, в котором находится кнопка видео на вашей странице.
Вы можете получить это доменное имя, переместив указатель мыши на несколько пикселей ниже кнопки Clipchamp на предварительном просмотре страницы, затем щелкнув правой кнопкой мыши и выбрав «Просмотр кода фрейма». В Chrome откроется новая вкладка. Перейдите в адресную строку вкладки и скопируйте доменное имя оттуда. В нашем примере домен выглядит так:
2-й домен: Это доменное имя имеет форму yourwebsitename-wixsite-com.fileusr.com, например, moestavern-wixsite-com.fileusr.com. Скорректируйте пример по имени вашего сайта и добавьте его в список доменов Clipchamp, затем вы можете опубликовать свою тестовую страницу Wix со встроенной кнопки записи видео, чтобы проверить, правильно ли она отображается.
Вы также можете найти это второе доменное имя, посмотрев исходный код вашей Wix страницы:
После сохранения этих 2 доменных имен в настройках API Clipchamp, рекордер и кнопка загрузки видеофайлов на вашей Wix странице будут готовы к использованию, и теперь ваши посетители могут начать отправлять свои видеозаписи на ваш YouTube канал.
9) Демонстрация отправленных видеороликов на своем веб-сайте
Если вы хотите использовать на своем веб-сайте видеоролики, которые люди отправили вам и которые теперь находятся на вашем канале YouTube, то ознакомьтесь со следующими инструкциями в разделе помощи Wix. Здесь вы узнаете, как вставлять YouTube ролики в свои страницы.
Итоги
Это все необходимые шаги для сбора видеороликов, если вы используете Wix. Обратите внимание, что мы также кратко изложили их в в статье нашей справки, которая доступна всем, у кого есть учетная запись в Clipchamp видео API.
Если вы не используете какой-либо из конструктор веб-сайтов, то вы можете прочесь наше отдельное руководство по установке нашего HTML5 видео API на любой веб-сайт.
Мы создали этот рекордер руководствуясь отзывами наших клиентов, чтобы сделать его подходящим для широкого спектра сценариев использования. Это, к примеру, сбор видео отзывов от ваших клиентов или получение видео комментариев от читателей в своем блоге.
Наконец, наш виджет рекордера видео поставляется с широким спектром опций, например, вы можете изменить брендинг на свой собственный, настроить цвета и другие элементы стиля, а также ряд настроек, связанных с входными и выходными параметрами видео.
Поскольку эти опции не рассмотрели в этой публикации, то вы можете ознакомиться с ними в нашей документации по API и решить, какие из параметров вы хотите добавить в свой рекордер на Wix странице. Вы можете легко добавить любые параметры в фрагмент кода, который вы вставили в редактор HTML в 6 шаге.
