이전 포스트에서 웹사이트 또는 윅스 블로그에서 더 쉽게 사용할 수 있도록 동영상 변환 및 파일 크기 줄이는 방법에 대해서 알려드렸습니다.

이전 기사는 소유한 동영상 파일 및 웹사이트를 디자인하는 것과 관련이 있었다면, 이번 포스트는 사이트 방문자로부터 동영상을 받을 수 있는 동영상 녹화기를 설치하는 방법에 대해서 알려드립니다.

아래 스크린샷은 윅스에 맞춘 것이지만, 플랫폼 관리 설정에서 맞춤 코드를 추가하면 다른 웹사이트 빌더 플랫폼에서 실행할 수 있는 웹캠 녹화기를 얻을 수 있는 방법 또한 설명하고 있습니다.

윅스 동영상 녹화기 생성 및 추가

이 방법을 사용하면 사용자는 윅스 사이트에서 직접 웹캠을 사용하여 동영상을 녹화하거나 컴퓨터에 이미 가지고 있는 동영상 파일을 업로드할 수 있습니다.

 

wix-video-recorder

 

두 가지 경우 모두, 유튜브, 드롭박스, 구글 드라이브, 아마존 S3 또는 마이크로소프트 애저 계정으로 동영상을 받을 수 있습니다. 업로드한 클립을 웹사이트에 쉽게 표시하려면, 윅스 편집기를 통해서 삽입할 수 있으므로 유튜브로 전송하는 것이 가장 좋습니다.

윅스 동영상 녹화기를 설정하기 위해 HTML5 동영상 및 자바스크립트 웹캠 API를 사용하고 있습니다. 사용자 및 사이트 방문자로부터 동영상을 수집할 수 있도록 웹사이트에 삽입할 수 있는 위젯입니다. 모든 웹사이트에서 사용할 수 있지만, 윅스 사이트에서 실행하는데 있어서 필요한 몇 가지 단계가 있습니다.

 

*************
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) 윅스 웹사이트 관리 백엔드에 로그인

나중에 샘플 새 페이지를 만들고 페이지의 HTML 설정에 일부 코드를 복사해야 합니다.

 

2) 두 번째 브라우저 탭에서 Clipchamp 동영상 API 무료 평가판 등록

다음 단계에서 필요한 고유 API 키를 얻고 사용자 동영상 업로드 대상을 설정하려면 API 평가판 계정을 등록해야 합니다. 가입 시 신용카드 정보는 필요하지 않으며 언제든지 평가판을 취소할 수 있습니다.

 

register-clipchamp-trial

 

3) 사용자 동영상을 전송할 업로드 대상으로 유튜브 설정하기

평가판 계정을 개설한 후, https://util.clipchamp.com/ko/api-setup/integrations의 API 설정에서, 유튜브를 클릭하고 Clipchamp API를 유튜브 계정에 연결하여, 사용자가 제출하는 동영상을 채널이나 지정한 재생목록에 업로드 받을 수 있습니다.

 

set-youtube-uploads

 

4) https://util.clipchamp.com/ko/api-setup/install 로 이동

이 페이지에 동영상 녹화 버튼을 사이트에 삽입하는데 필요한 2개의 코드 스니펫이 있습니다. 페이지에서 설명하는 방법은 윅스 웹사이트가 아닌 다른 웹사이트에 적용되는 사항이므로 무시해도 됩니다. 윅스에서 만든 새 페이지의 HTML 편집기에 2개의 코드 스니펫을 복사해서 붙여넣기만 하면 됩니다.

 

clipchamp-api-code

 

5) 윅스에서 새 페이지를 만들고 “HTML 설정” 열기

HTML 편집기에서 다음과 같이 4 단계에서 Clipchamp 페이지의 첫 번째 섹션에서 코드 스니펫을 붙여넣습니다:

wix-html-editor

 

6) HTML 편집기에 첫 번째 스니펫 바로 아래에 두 번째 섹션에서 코드를 복사하기

 

wix-html-editor

 

7) 다음으로 HTML 코드를 삽입한 페이지를 저장하고 미리보기

코드가 올바르게 추가된 경우, 미리보기 페이지에서 새 삽입 동영상 녹화 버튼이 표시됩니다. 야호!

test-video-button

 

8) 마지막 단계로 동영상 버튼 도메인 승인하기

녹화기를 작동시키려면, Clipchamp API 설정에서 다음과 같이 2개의 도메인을 허용 목록에 추가해야 합니다:

첫 번째 도메인: 윅스 페이지에 삽입된 Clipchamp 버튼을 표시하는데 윅스가 사용하는 URL을 복사하고, https://util.clipchamp.com/ko/api-setup/domains의 Clipchamp API 설정에서 허용 도메인 목록에 추가합니다. 브라우저 주소창 (크롬을 사용하고 있다고 가정한 경우)에 표시되는 URL (또는 “도메인”)이 아니라 페이지에서 동영상 버튼이 있는 iframe의 URL입니다.

페이지 미리보기에서 Clipchamp 버튼 아래로 약간 마우스 커서를 이동하여 마우스 오른쪽 버튼을 클릭하고 “프레임 소스 보기”를 클릭하면 도메인 이름을 얻을 수 있습니다. 크롬에서는 새 브라우저 탭이 열립니다. 탭의 주소창에서 도메인 이름을 복사합니다. 예를 들어 도메인은 그림과 같습니다

wix-iframe-url

두 번째 도메인: 이 도메인 이름은 yourwebsitename-wixsite-com.fileusr.com의 명명 규칙을 따릅니다. 예: moestavern-wixsite-com.fileusr.com. 웹사이트 이름으로 조정하고 Clipchamp 도메인 목록에 추가한 다음, 윅스 테스트 페이지를 게시하여 삽입한 녹화 버튼이 올바르게 표시되는지 확인할 수 있습니다.

윅스 페이지의 소스 코드에서 두 번째 도메인 이름을 찾을 수 도 있습니다

whitelist Wix domain to display the video recorder button

Clipchamp API 설정에 2가지 도메인 이름을 저장한 후, 윅스 페이지의 동영상 녹화기 및 업로더 버튼을 사용하여 방문자가 녹화 및 기타 동영상을 유튜브 채널에 전송할 수 있습니다.

 

wix-video-recorder

 

9) 사이트에 전송된 동영상 표시

사람들이 전송한 동영상 및 유튜브 채널에 있는 동영상을 웹사이트에서 보여주려는 경우, 유튜브 동영상을 삽입하는 방법을 윅스 도움말에서 다음 설명 방법을 참조하십시오.

마무리

윅스를 사용하는 경우, 동영상을 수집하려면 앞에서 설명한 모든 단계를 거쳐야합니다. 또한 Clipchamp 동영상 API 계정에 이미 등록한 사용자를 위하여 간략하게 이 주제에 대해 도움말 기사를 작성했습니다.

웹사이트 빌더를 사용하지 않는 경우, 웹사이트에 HTML5 동영상 API 삽입하는 설치 방법을 별도로 참조하시기 바랍니다.

광범위한 시나리오 및 모든 웹 프로젝트에 적합하도록 고객과 함께 구축했습니다. 예를 들어, 온라인 상점을 운영할 경우 고객의 동영상 사용 후기 또는 블로그를 읽는 독자의 의견을 동영상으로 수집할 수 있습니다.

마지막으로 동영상 녹화기 위젯은 다양한 옵션이 있습니다. 예를 들어, 브랜딩을 직접 변경, 입출력 동영상과 관련된 여러가지 설정 뿐만 아니라 색상 및 기타 스타일 요소를 조정할 수 있습니다.

이 포스트에서 전문적인 옵션에 대해서 다루지 않았지만, API 설명서를 자세히 살펴보고 윅스 동영상 녹화기에 추가하고 싶은 매개 변수를 결정할 수 있습니다. 6 단계에서 HTML 편집기에 삽입한 코드 스니펫에 다른 옵션을 추가할 수 있습니다.