서문
범퍼는 일반적으로 프리롤 광고 및 콘텐츠 앞에 자동으로 삽입되는 매우 짧은 동영상(10초 이하)입니다. 범퍼는 수익 창출에 사용되지 않지만 대신 회사 로고 또는 브랜드와 같은 정보를 전달합니다. 콘텐츠 비디오의 경우 포스터가 표시되지만 플레이어가 재생을 시작하면 범퍼가 먼저 표시되고 콘텐츠 비디오가 표시됩니다. 다음 예에서는 회사 소개 범퍼가 표시되고 그 뒤에 콘텐츠 비디오가 표시됩니다.
콘텐츠 동영상의 포스터, 제목 및 간단한 설명이 표시되지만 재생이 시작되면 범퍼가 재생된 다음 콘텐츠 동영상이 재생됩니다.
기능성
범퍼 동영상에 대한 세부정보는 다음과 같습니다.
- 범퍼 광고는 CSAI(클라이언트측 광고) 및 SSAI(서버측 광고)와 모두 호환됩니다.
- 범퍼 광고는 프리롤 광고 및 콘텐츠 전에 재생됩니다.
- 범퍼 비디오 재생 중에 플레이어를 구성할 수 있습니다.
- 플레이어 컨트롤 표시/숨기기
- 재생 중 탐색 방지
- 범퍼를 나타내도록 검색 표시줄 색상 변경
- 분석 데이터는 모든 콘텐츠 비디오와 동일하게 추적됩니다.
구현
비디오 범퍼를 구현하는 세 가지 방법은 다음과 같습니다.
- 고급(포함) 코드에서 속성 사용
- 표준(iframe) 코드에서 쿼리 문자열 사용
- 플레이어의 JSON 구성에 추가
자세한 내용은 다음과 같습니다.
고급(포함) 코드
고급 플레이어 코드를 사용하여 플레이어를 활성화하려면 다음 HTML에 강조표시된 대로 플레이어 코드에 data-bumper-id=" your_bumper_id " 속성을 추가하십시오.
<div style="width: 960px; height: 540px;">
<video-js data-account="1752604059001"
data-player="Wj0445Avw"
data-embed="default"
controls=""
data-video-id="5755775186001"
data-playlist-id=""
data-application-id=""
width="960" height="540"
class="vjs-fill"
data-bumper-id="4446983094001"></video-js>
<script src="https://players.brightcove.net/1752604059001/Wj0445Avw_default/index.min.js"></script>
</div>물론 HTML에서 속성의 순서는 중요하지 않으므로 data-bumper-id=" your_bumper_id " 는 <동영상> 꼬리표.
표준(iframe) 코드
표준(iframe) 코드를 사용하여 플레이어를 활성화하려면 쿼리 매개변수를 추가합니다. &bumperId= your_bumper_id를 다음 HTML에 강조 표시된 대로 쿼리 문자열에 추가합니다.
<iframe src="https://players.brightcove.net/1752604059001/
Wj0445Avw_default/index.html?videoId=5715315990001
&bumperId=4446983094001" allowfullscreen=""
allow="encrypted-media" width="960" height="540">JSON 구성
해당 플레이어의 구성을 변경하여 특정 플레이어의 모든 인스턴스에서 범퍼 비디오를 활성화할 수 있습니다. 즉, 위의 두 인스턴스에 표시된 것처럼 페이지의 플레이어 코드에 아무 것도 추가할 필요가 없습니다.
Studio에서 플레이어 구성을 변경하려면 플레이어 모듈로 이동한 다음 변경할 플레이어를 클릭하십시오. 플레이어 속성에서 JSON Editor 를 클릭합니다. 강조 표시된 대로 video_cloud 섹션 범퍼 비디오 정보에 추가합니다.
{
"compatibility": true,
"video_cloud": {
"policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
"bumper": {
"id": "4446983094001"
}
},
"player": {
"template": {
"name": "single-video-template",
"version": "6.66.2"
}
},
...옵션
JSON 구성을 사용할 때 다음 옵션도 사용할 수 있습니다.
show_controls- false인 경우 범퍼 재생 중에 컨트롤을 제거합니다(기본적으로 true).progress_bar_color- 지정된 경우 진행률 표시줄 색상을 변경합니다(기본적으로 정의되지 않음 - 일반 플레이어 진행률 표시줄 색상을 상속함).prevent_seeking- 지정된 경우 검색을 방지합니다(기본값은 false).
플레이어의 JSON 구성에 옵션을 추가할 수 있습니다.
{
"compatibility": true,
"video_cloud": {
"policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
"bumper": {
"id": "4446983094001",
"show_controls": true,
"progress_bar_color": "#654321",
"prevent_seeking": true
}
},
...