단계별: 페이지 내 환경 만들기 및 게시

이 빠른 시작의 목적은 브라이트코브 갤러리를 사용하여 페이지 내 경험을 만드는 방법을 보여주기 위한 것입니다.

빠른 시작을 완료하면 다음 기능을 사용할 수 있습니다.

  • 갤러리를 사용하여 새로운 환경 만들기
  • 페이지 내 경험에 비디오 추가
  • 페이지 내 환경 사용자 지정 및 스타일 지정
  • 페이지 내 환경 미리 보기 및 게시

고객

웹 페이지에 임베드할 수 있는 페이지 내 경험을 만들려는 모든 Video Cloud 게시자

전제 조건

빠른 시작 자산 사용

이 빠른 시작과 함께 제공되는 샘플 비디오를 사용하여 진행하려면 다음 단계를 수행하십시오.

  1. 샘플 파일을다운로드합니다 .
  2. 업로드모듈을 사용하여비디오를 Video Cloud 계정에 업로드합니다 .
  3. 미디어모듈을 사용하여동물 재생 목록을 만들고재생 목록에 비디오를 추가합니다.
  4. 사용플레이어모듈새로운 Brightcove Player 생성호출갤러리 플레이어 .

갤러리를 사용하여 페이지 내 환경 만들기

브라이트코브 갤러리를 사용하여 페이지 내 경험을 만들려면 다음 작업을 완료해야 합니다.

계정 선택

Video Cloud 구독에 따라 여러 Video Cloud 계정에 액세스할 수 있습니다. 시작하기 전에 올바른 계정을 사용하고 있는지 확인하십시오.

  1. Video Cloud Studio 에 로그인합니다.
  2. 현재 비디오 클라우드 계정 이름이 페이지 우측 상단 모서리에 나타납니다. 계정이 여러 개인 경우 계정 선택기 드롭다운을 클릭하고 페이지 내 경험을 만들려는 계정을 선택합니다. 이 계정도 사용할 동영상이 있는 계정이어야 합니다.
  3. 기본 탐색에서 갤러리 를 클릭합니다.

새로운 페이지 내 환경 만들기

새 페이지 내 경험을 만들려면 다음과 같이 하십시오.

  1. 경험을 만들지 않은 경우 프로젝트 페이지가 표시되지 않습니다. 페이지 내옆에 있는만들기를클릭합니다.

    기존 경험이 있는 경우 새 경험을 클릭한 다음 페이지 상단의 인페이지 탭을 클릭합니다.

  2. 페이지 내 경험 템플릿 목록이 표시됩니다. 세로 재생 목록템플릿을 찾아 [ 선택 ] 을 클릭합니다.
  3.  경험 제목및경험 설명을입력합니다. 레이아웃 크기에대해응답성을선택합니다.
  4. 경험 만들기를클릭합니다.

레이아웃 편집기가 열립니다. 경험 제목은 페이지 상단에 나타납니다. 제목은경험 세부정보의 일부로 변경할 수 있습니다.

환경 사용자 지정

객체를 경험에 추가하여 모양을 사용자 정의할 수 있습니다. 페이지 내 경험은 서로 다른 상태를 가지며 각 상태를 사용자 지정할 수 있습니다. 사용자 정의할 수 있는 상태는 다음과 같습니다.

  • 재생전 - 비디오 재생이시작되기 전에 처음 렌더링할 때 경험의 표시 방법
  • 재생 - 동영상이 재생될 때 경험의 표시 방법
  • 재생 후 - 동영상 재생 후 경험의 표시 방법

다른 상태를 편집하려면 상태를 클릭한 다음 필요에 따라 환경에 구성 요소를 추가합니다. 자세한 내용은페이지 내 환경 사용자 정의를참조하십시오.

페이지 내 경험에 개체를 추가하려면 다음과 같이 하십시오.

  1. 왼쪽 탐색에서 레이아웃을 클릭합니다.
  2. 재생 전상태를 클릭합니다. 더하기 아이콘 ( ) 은 환경에 구성 요소를 추가할 수 있는 위치를 나타냅니다. 경험 맨 위에 있는 더하기 아이콘을 클릭합니다. 구성 요소 선택기가 열립니다.
  3. 이미지구성 요소를 클릭합니다. 찾아보기링크를 클릭하고 경험의 헤더로 사용할 이미지를 선택합니다. 빠른 시작 샘플 파일에는 사용할 수 있는 이미지가 포함되어 있습니다.
  4. 저장을 클릭합니다. 이미지가 경험에 나타납니다.
  5. 이미지 구성 요소 위에 있는 더하기 아이콘을 클릭하고텍스트구성 요소를 환경에 추가합니다. 텍스트를 입력한 다음저장을클릭합니다.
  6. 이미지와 텍스트가 경험에 나타나는지 확인합니다.

구성 요소 속성을 편집하거나 구성 요소를 삭제하려면 구성 요소 위에 마우스를 놓고 편집 또는 삭제 아이콘을 클릭합니다.

경험에 동영상 추가

선택한 템플릿에 따라 한 번에 하나 이상의 비디오가 표시될 수 있습니다. 동영상을 경험에 수동으로 추가하거나 재생목록을 선택하거나 참조 ID를 제공할 수 있습니다. 페이지 내 경험에 비디오를 추가하는 방법에 대한 자세한 내용은페이지 내 경험에 비디오 추가를참조하십시오.

페이지 내 경험에 비디오를 추가하려면 다음 단계를 수행합니다.

  1. 왼쪽 탐색에서 [ 비디오 ] 를 클릭합니다.
  2. 비디오 추가를클릭합니다.
  3. 선택방법의비디오 선택추가 할 동영상을 수동으로 선택하려면또는 , 선택방법의재생 목록 선택찾아보고 선택동물샘플 비디오로 만든 재생 목록입니다.
  4. 선택을클릭합니다. 동영상 목록이 표시됩니다.

비디오에 인터랙티브한 기능 추가

링크 및 카드 상호 작용을 비디오에 추가할 수 있습니다. 비디오가 재생될 때 상호 작용이 표시됩니다. 경험에 상호 작용을 추가하는 방법에 대한 자세한 내용은페이지 내 경험에 상호 작용 추가를참조하십시오.

비디오의 상호 작용을 구성하려면 다음 단계를 수행합니다.

  1. 왼쪽 탐색에서 [ 비디오 ] 를 클릭합니다.
  2. 상호 작용을 추가 할 비디오를 선택하고 링크 아이콘 ( )에서행위기둥.
  3. 링크 텍스트및링크 URL을추가합니다. 미리보기 플레이어가 링크의 미리보기를 표시합니다.
  4. 구성링크를 클릭합니다.
  5. % 링크로 전환을클릭합니다. 비디오에서시작 시간을 50% 지점으로 설정합니다.
  6. [ 지속 시간 ] 에서비디오가 끝날 때까지를선택합니다.
  7. 설계링크를 클릭합니다. 플레이어의 오른쪽 아래에 표시되도록 링크를 설정합니다.
  8. 저장을 클릭합니다. 비디오에 대해 구성된 모든 상호 작용 목록이 표시됩니다.
  9. 대화 상자 제목에서X를클릭하여 상호 작용 편집기를 닫습니다.

상호 작용이 있는 동영상은상호 작용열에 구성된 상호 작용의 유형을 나타내는 아이콘이 표시됩니다.

스타일 사용자 정의

스타일은 경험에 사용되는 글꼴과 색상을 제어합니다. 스타일 사용자 지정에 대한 자세한 내용은페이지 내 경험의 스타일 사용자 정의를참조하십시오.

스타일을 구성 하려면 다음과이 같이 하십시오.

  1. 왼쪽 탐색에서 스타일을 클릭합니다.
  2. 전역스타일을 찾습니다. 문자 색상원을 클릭하고 문자 색상을 빨간색으로 변경합니다. 이전에 경험에 추가된 텍스트 구성 요소가 빨간색으로 변경되어야 합니다.
  3. X를 클릭하여 색상 선택기를 닫습니다.
  4. 비디오 제목스타일을 찾습니다. 문자 색상원을 클릭하고 문자 색상을 파란색으로 변경합니다. X를 클릭하여 색상 선택기를 닫습니다.
  5. 왼쪽 탐색을 맨 위로 스크롤하고레이아웃으로 돌아 가기링크를 클릭하십시오.

환경 설정 구성

경험 설정은 플레이어, 소셜 설정 및 기타 설정과 같은 경험의 다양한 측면을 제어합니다. 설정 사용자 지정에 대한 자세한 내용은페이지 내 환경에 대한 설정 구성을참조하십시오.

환경 설정을 구성하려면 다음과 같이 하십시오.

  1. 왼쪽 내비게이션에서설정 > 플레이어를클릭합니다.
  2. 사용가능한 플레이어드롭다운 목록을 사용하여 이전에 만든갤러리 플레이어를선택합니다. 이것은 페이지 내 경험에 사용될 플레이어입니다.
  3. 자동으로 다음 비디오로 이동옵션을 선택합니다.
  4. 저장을 클릭합니다.
  5. 왼쪽 내비게이션에서설정 >소셜을 클릭합니다.
  6. 소셜 공유 옵션이 표시되는 방법을 선택합니다.
  7. 비디오를 공유할 수 있는 소셜 미디어 사이트를 선택합니다. 일부 사이트에서는 사용자 지정 메시지를 게시할 수도 있습니다.
  8. 저장을 클릭합니다.

경험 세부 정보 검토

경험 세부 정보는 경험 제목 및 크기 조정이 구성된 곳입니다. 환경 세부 정보 사용자 지정에 대한 자세한 내용은페이지 내 경험에 대한 세부 정보 구성을참조하십시오.

환경 세부 정보를 구성하려면 다음과 같이 하십시오.

  1. 왼쪽 탐색에서 개요를 클릭합니다.
  2. 필요한 경우 경험 제목과 설명을 편집합니다.
  3. 레이아웃 크기가반응형으로설정되어 있는지 확인합니다. 레이아웃 크기가 반응형으로 설정되면 페이지의 컨테이너에 맞게 크기가 조정됩니다.
  4. 변경 사항이 있으면저장을클릭합니다.

페이지 내 환경 미리 보기 및 게시

페이지 내 경험을 미리 보면 갤러리 인터페이스에서 볼 필요 없이 환경이 어떻게 표시되는지 확인할 수 있습니다. 페이지 내 경험을 게시하면 웹 페이지 내에 경험을 표시하는 데 필요한 포함 코드가 생성됩니다. 페이지 내 환경 미리 보기 및 게시에 대한 자세한 내용은 페이지 내 환경미리 보기 및 게시를참조하십시오.

  1. 페이지 내 경험을 미리 보려면 환경을 편집한 다음미리 보기를클릭합니다.
  2. 바탕 화면 미리 보기가 새 브라우저 탭에서 열립니다.
  3. 왼쪽 상단 모서리의 드롭다운 목록을 사용하여 다양한 장치 유형에서 경험을 미리 볼 수 있으며 다양한 경험 상태에서도 경험을 미리 볼 수 있습니다. 모바일 미리보기가 아래에 표시됩니다.
  4. 페이지 내 경험을 게시하려면 [ 게시 및 포함 ] 을 클릭합니다.
  5. 딸깍 하는 소리게시또는변경 사항 게시 .
  6. 게시 프로세스가 시작되고 완료되면게시 상태가이 환경이 최신 상태로변경됩니다.  환경을 업데이트하는 데 몇 분 정도 걸릴 수 있습니다.

페이지 내 환경이 게시되면공유 가능 URL을다른 사용자와 공유하여 환경을 미리 볼 수 있습니다. 임베드 코드는 기존 웹 페이지에 페이지 내 경험을 임베드하는 데 사용할 수 있습니다.