Google Ads, Google AdMob, AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.
동영상 구성요소를 사용하면 프로젝트에 동영상을 삽입하고 양방향 기능을 추가할 수 있습니다.
YouTube 동영상을 표시하려면 대신 YouTube 구성요소를 사용하세요.
프로젝트에 동영상 구성요소를 추가하는 방법:
- 구성요소 패널에 이어 미디어 폴더를 엽니다.
- 동영상
구성요소를 스테이지로 드래그합니다. 광고를 제작 중인 경우 파일 > 애셋 가져오기... 명령어를 사용하여 다음 단계를 건너뛸 수도 있습니다.
- 속성 패널의 동영상 속성 섹션에서 소스 입력란에 동영상 소스 파일 URL을 입력합니다. 동영상 소스 파일이 로컬 파일인 경우 입력란에서 찾아보기
버튼을 클릭해 컴퓨터 파일 시스템에서 동영상을 선택합니다.
- 동영상을 양방향으로 설정하려면 핫스팟 및 큐 포인트를 추가합니다. 스테이지의 동영상 구성요소를 더블클릭하여 양방향 동영상 대화상자를 엽니다.
- 지정된 시간 동안 동영상 구성요소 위에 핫스팟이 표시됩니다.
- 큐 포인트를 사용하면 동영상 재생 중 특정 시간에 이벤트를 연결할 수 있습니다.
모바일 브라우저에서의 동영상
모바일 브라우저는 동영상 자동재생을 사용 중지하여 요청하지 않은 콘텐츠로 인한 데이터 요금 부과를 방지합니다. 모바일 브라우저의 경우 자동재생을 끄고 동영상 제어를 켜는 것이 가장 좋습니다.
속성 패널에서 다음과 같이 변경합니다.
- 자동재생 상자를 선택 해제합니다.
- 컨트롤 표시 상자를 선택합니다.
양방향 동영상 대화상자
양방향 동영상 대화상자를 사용하면 동영상을 미리 보는 것은 물론 핫스팟과 큐 포인트까지 설정할 수 있습니다. 대화상자에는 동영상 타임라인이 포함되므로 핫스팟과 큐 포인트의 발생 시점을 확인할 수 있습니다. 핫스팟은 플레이헤드가 핫스팟의 시작 및 종료 시간 사이에 위치한 경우에만 동영상 미리보기에 표시됩니다.
양방향 동영상 대화상자 컨트롤
동영상 미리보기 아래에서는 다음 버튼을 사용하여 재생 및 플레이헤드 위치를 제어할 수 있습니다.
| 뒤로 이동(큐 포인트, 핫스팟 시작/끝 또는 동영상 시작 지점으로) | |
| 이전 프레임 | |
| 재생/일시중지 | |
| 다음 프레임 | |
| 앞으로 이동(큐 포인트, 핫스팟 시작/끝 또는 동영상 종료 지점으로) |
노란색으로 표시된 시간을 클릭하고 초 단위의 새로운 시간을 입력하여 현재의 동영상 재생 시간을 직접 수정할 수도 있습니다.
큐 포인트 추가
- 동영상 타임라인 플레이헤드 위치에 큐 포인트를 추가하려는 경우 동영상 아래 큐 포인트 생성
버튼을 클릭합니다. 또는 동영상 타임라인을 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 큐 포인트 추가를 선택해도 됩니다.
- 큐 포인트 마커
가 동영상 타임라인 위에 표시됩니다.
- 오른쪽 속성 패널로 이동하거나 큐 포인트를 오른쪽 버튼으로 클릭하고 ID 수정...을 선택하여 큐 포인트 ID를 수정할 수 있습니다.
- 큐 포인트 시간을 조정하려면 동영상 타임라인을 따라 큐 포인트 마커를 드래그하거나 속성 패널에서 새로운 시간을 입력합니다. 큐 포인트 간에 최소 0.5초의 간격이 있어야 합니다.
대화상자를 닫은 후에는 이벤트 및 작업에서 큐 포인트를 참조할 수 있습니다.
큐 포인트 삭제
큐 포인트 마커를 오른쪽 버튼으로 클릭하고 삭제를 선택합니다.
핫스팟 추가
- 핫스팟을 추가할 위치로 타임라인 플레이헤드를 이동합니다.
- 동영상 타임라인 왼쪽에 있는 + 핫스팟 버튼을 클릭합니다. 동영상 타임라인 밑에 새로운 핫스팟 트랙이 표시됩니다.
- 오른쪽의 속성 패널에서 오버레이로 표시하려는 애셋을 선택합니다.
- 핫스팟을 투명하게 하려면 이 단계를 건너뛰세요.
- 동영상 애셋을 사용하면 핫스팟이 표시될 때 동영상이 컨트롤 없이 자동으로 재생되기 시작합니다.
- 핫스팟의 위치, 크기 및 타이밍을 조정합니다.
- 기본적으로 핫스팟은 동영상 재생 시작 전과 동영상 종료 후를 포함하여 동영상 전체 재생 시간 동안 표시됩니다.
- 속성 패널에서 관련 속성을 변경하거나 핫스팟 자체, 핫스팟 크기 변경 핸들과 동영상 타임라인의 핫스팟 막대를 드래그할 수 있습니다.
핫스팟을 클릭하는 사용자에게 반응하려면 대화상자를 닫은 후에 마우스 > 클릭을 감지하는 이벤트를 설정하세요.
핫스팟은 전체화면 동영상에서 작동하지 않습니다.
핫스팟 삭제
동영상 타임라인 왼쪽의 핫스팟 ID 옆에 있는 X를 클릭합니다.
속성
동영상 구성요소 속성
동영상 구성요소 속성은 속성 패널에서 확인할 수 있습니다(양방향 동영상 대화상자를 종료해야 함).
| 속성 | 설명 |
|---|---|
| 이름 | 요소의 이름입니다. |
| 자동재생 | 선택하면 페이지가 로드될 때 동영상이 자동으로 재생됩니다. 일부 모바일 브라우저에서는 지원되지 않습니다. |
| 반복 | 선택하면 동영상 재생이 계속 반복됩니다. |
| 음소거 | 선택하면 동영상 재생이 음소거된 상태로 시작됩니다. |
| 컨트롤 | 선택하면 동영상 플레이어에 표준 동영상 컨트롤 막대가 표시됩니다. |
| 소스 | 동영상 소스 URL입니다. URL을 쉼표로 구분하여 다른 형식의 여러 가지 소스를 입력할 수 있습니다. 동적 데이터에 결합될 수 있습니다. |
| 포스터 | 사용자가 동영상을 재생하거나 찾을 때까지 표시할 포스터 프레임의 URL입니다. 동적 데이터에 결합될 수 있습니다. |
양방향 동영상 대화상자에서 큐 포인트 속성을 보고 수정할 수 있습니다.
| 속성 | 설명 |
|---|---|
| ID | 큐 포인트 ID입니다. |
| 시간 | 큐 포인트가 설정된 시간(초)입니다. 동적 데이터에 결합될 수 있습니다. |
양방향 동영상 대화상자에서 핫스팟 속성을 보고 수정할 수 있습니다.
| 속성 | 설명 |
|---|---|
| ID | 핫스팟 ID입니다. |
| 왼쪽 | 동영상 구성요소 너비의 백분율로 나타낸 핫스팟의 왼쪽 위치입니다. 동적 데이터에 결합될 수 있습니다. |
| 상단 | 동영상 구성요소 높이의 백분율로 나타낸 핫스팟의 상단 위치입니다. 동적 데이터에 결합될 수 있습니다. |
| 너비 | 동영상 구성요소 너비의 백분율로 나타낸 핫스팟의 너비입니다. 동적 데이터에 결합될 수 있습니다. |
| 높이 | 동영상 구성요소 높이의 백분율로 나타낸 핫스팟의 높이입니다. 동적 데이터에 결합될 수 있습니다. |
| 표시 시간 | 핫스팟이 표시되기 시작하는 시간(초)입니다. 재생 전 표시를 선택한 경우에는 적용되지 않습니다. 동적 데이터에 결합될 수 있습니다. |
| 재생 전 표시 | 동영상 재생이 시작되기 전에 핫스팟을 표시할지 여부입니다. |
| 숨기기 시간 | 핫스팟 표시가 중단되는 시간(초)입니다. 재생 후 표시를 선택한 경우에는 적용되지 않습니다. 동적 데이터에 결합될 수 있습니다. |
| 재생 후 표시 | 동영상 재생 종료 후에 핫스팟을 계속해서 표시할지 여부입니다. |
| 애셋 | 오버레이로 표시할 이미지, 동영상 또는 그룹입니다. 동적 데이터에 결합될 수 있습니다. |
| 크기 조절 | 애셋이 이미지인 경우 핫스팟과 애셋 크기가 다를 때 사용할 확장 메서드입니다.
|
이벤트와 액션
이벤트 구성 방법 알아보기
이벤트
동영상 구성요소에서 전송하는 이벤트다음과 같은 동영상 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.
| 이벤트 | 설명 |
|---|---|
| 일시중지 후 재생 | 미디어 재생이 일시중지되었다가 다시 재생되기 시작할 때 전송됩니다. 즉, 이전 일시중지 이벤트 이후에 재생이 다시 시작되었을 때 전송됩니다. |
| 일시중지됨 | 재생이 일시중지될 때 전송됩니다. |
| 재생 중 | 미디어가 재생되기 시작할 때 전송됩니다(최초 재생 시, 일시중지 이후 또는 종료 및 다시 시작 후). |
| 종료됨 | 재생이 완료될 때 전송됩니다. |
| 볼륨 변경 | 오디오 볼륨을 변경할 때 전송됩니다(볼륨 설정 시 및 음소거 속성 변경 시). |
| 탐색됨 | 찾기 작업이 완료될 때 전송됩니다. |
| 버퍼링 | 다른 작업(예: 찾기)이 아직 완료되지 않아 요청된 작업(예: 재생)이 지연될 때 전송됩니다. |
이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 동영상 구성요소를 타겟으로 설정하세요.
동영상에 큐 포인트를 추가하면 다음 큐 포인트 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.
| 이벤트 | 설명 |
|---|---|
| 큐 포인트에 도달함 | 미디어 재생이 큐 포인트에 정의된 시간에 도달하면 전송됩니다. |
이벤트 대화상자에서 이 이벤트를 선택하려면 큐 포인트를 타겟으로 설정하세요.
동영상에 핫스팟을 추가하면 다음 핫스팟 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.
| 이벤트 | 설명 |
|---|---|
| 핫스팟 표시됨 | 핫스팟이 표시되면 전송됩니다. |
| 핫스팟 숨김 | 핫스팟을 숨기면 전송됩니다. |
이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 핫스팟을 타겟으로 설정하세요.
작업
동영상 구성요소에서 수행하는 작업다른 이벤트에 대한 반응으로 다음 동영상 구성요소 작업이 트리거될 수 있습니다.
| 작업 | 구성 옵션 |
|---|---|
| 음소거 전환 | 없음 |
| 일시중지 | 없음 |
| 재생 | 없음 |
| 다시 재생 | 없음 |
| 탐색 | 시간 - 건너뛰는 시간(단위: 초)입니다. |
| 볼륨 설정 | 볼륨 설정(0~100) - 백분율 단위의 동영상 볼륨입니다. |
| 소스 설정 | 소스 - 쉼표로 구분한 여러 형식의 소스 URL입니다. |
이벤트 대화상자에서 이러한 작업 중 하나를 선택하는 경우 동영상 구성요소를 수신자로 설정하세요.
동영상에 큐 포인트를 추가하면 다른 이벤트에 대한 반응으로 다음 큐 포인트 작업이 트리거될 수 있습니다.
| 작업 | 구성 옵션 |
|---|---|
| 큐 포인트 탐색 | 없음 |
| 큐 포인트 시간 설정 | 시간 - 시간이 초 단위로 지정됩니다. |
이벤트 대화상자에서 이러한 작업 중 하나를 선택할 때 큐 포인트를 수신자로 설정하세요.
동영상에 핫스팟을 추가하면 다른 이벤트에 대한 반응으로 다음 핫스팟 작업이 트리거될 수 있습니다.
| 작업 | 구성 옵션 |
|---|---|
| 공개 설정 변경 | 핫스팟 표시 - 핫스팟을 표시합니다. 핫스팟을 숨기려면 이 체크박스를 선택 해제합니다. |
| 표시 시간 또는 숨기기 시간 찾기 | 표시 시간 찾기 - 핫스팟 표시 시간을 찾습니다. 핫스팟의 숨기기 시간을 찾으려면 이 체크박스를 선택 해제합니다. 재생 도중에는 효과가 일시적인 만큼 이 작업은 재생 전후에 표시되는 핫스팟에 사용하는 것이 가장 좋습니다. |
| 시간 설정 |
|
이벤트 대화상자에서 이러한 작업 중 하나를 선택하는 경우 핫스팟을 수신자로 설정하세요.
미리보기
스테이지에서 동영상 구성요소를 더블클릭하면 양방향 동영상 대화상자에서 동영상을 미리 볼 수 있습니다. 대화상자의 미리보기에서는 애니메이션을 포함하는 핫스팟을 완전히 렌더링하지는 못합니다.
문서의 다른 요소와 함께 구성요소를 미리 보거나 요소를 테스트하려면, 양방향 동영상 대화상자를 종료하고 오른쪽 상단 모서리에 있는 미리보기 버튼을 클릭합니다.