비즈니스 수익을 비즈니스의 매출을 10%~20% 증가시킬 수 있는 것은 필수적인 것이 아니라 필수입니다. 브랜드 가치가 1조 달러를 넘는 상위 리테일러의 경우 브랜드 가치가 1조 달러를 넘는이는 단순히 적절한 로고를 사용하는 것만을 의미하지 않습니다. 모든 고객 접점의 모든 디테일이 브랜드를 뒷받침하고 전달해야 합니다.
기업이 브랜드를 감사할 때 종종 간과하는 요소는 온라인 동영상 플레이어(OVP)입니다. 오늘날 대부분의 기업은 웹 사이트와 앱에서 동영상 플레이어를 사용하고 있지만, 여전히 브랜드 플레이어를 사용하지 않는 경우가 많습니다. 무료 플레이어를 사용하거나 OVP에 브랜딩 기능이 있다는 사실을 몰랐기 때문일 수 있습니다. 어느 쪽이든, 일반 플레이어는 브랜드 일관성을 떨어뜨리고 잠재적으로 비즈니스 수익에 손해를 끼칠 수 있습니다.
제공업체에서 브랜드 플레이어를 제공하는지 확실하지 않은 경우, 잠시 시간을 내어 모든 플랫폼에서 사용자 지정할 수 있는 요소를 검토해 보세요.
브랜드 동영상 플레이어 요소
오늘날의 온라인 동영상 플레이어는 HTML5를 기반으로 제작되므로 기술적으로 다른 웹 객체와 마찬가지로 사용자 정의할 수 있습니다. 그러나 브랜딩 목적으로 이러한 요소는 일반적으로 다음 네 가지 범주에 속합니다.
- 색상. 색상은 가장 먼저 떠올리는 브랜드 요소 중 하나이지만, 동영상 플레이어는 가장 마지막으로 적용하는 곳 중 하나일 수 있습니다. 재생 버튼부터 볼륨 조절, 진행률 표시줄까지 모든 것을 브랜드 색상에 맞게 사용자 지정할 수 있습니다.
- 글꼴. 코믹 산스를 제외하면 대부분의 사람들은 타이포그래피에 대해 생각해 본 적이 없을 것입니다. 하지만 헬베티카와 Arial의 차이를 구분하지 못하더라도 맥도날드의 'M'이 갑자기 타임즈 뉴 로마체로 바뀌었다면 누구나 눈치챌 것입니다. 플레이어의 런타임 및 호버 텍스트에도 동일하게 적용되며, 잘못된 글꼴은 브랜드 경험을 방해할 수 있습니다.
- 아이콘. 로고 외에도 아이콘은 시각적 브랜딩의 또 다른 중요한 요소입니다. 어떤 브랜드는 곡선을 선호하고 어떤 브랜드는 직선 모서리를 선호합니다. 어떤 브랜드는 섬세한 선을 원하고 어떤 브랜드는 대담하고 무거운 선의 무게를 원합니다. 색상 및 글꼴과 마찬가지로 재생 버튼, 볼륨 조절 및 기타 플레이어 컨트롤도 다양한 아이콘으로 사용자 지정할 수 있습니다.
- 컨트롤. 일부 브랜드의 경우 플레이어 컨트롤 자체가 잘못된 메시지를 전달할 수 있습니다. 너무 많은 컨트롤은 미니멀한 브랜드에 어수선함을 줄 수 있고, 일부 플레이어 레이아웃은 다른 국가의 시청자에게 이질적으로 느껴질 수 있습니다. 그렇기 때문에 동영상 플레이어 컨트롤의 가시성과 위치를 모두 조정할 수 있는 것이 중요합니다.
동영상 플레이어를 브랜딩하는 방법
동영상 플레이어는 여러 가지 방법으로 브랜드에 맞게 맞춤 설정할 수 있습니다. 예를 들어, 웹 개발자가 웹 페이지의 CSS를 인라인으로 빠르게 편집할 수 있습니다. 그러나 이러한 편집은 한 페이지와 그 페이지에서 호스팅되는 플레이어에만 적용되므로 이 방법은 최선의 방법은 아닙니다.
브랜드 동영상 플레이어를 더 효과적으로 제어하려면 동영상 플랫폼 내에서 관리해야 합니다. 이를 위한 세 가지 주요 방법이 있습니다.
|
브랜드 플레이어 요소 |
OOTB 플랫폼 옵션 |
스타일 시트 |
스타일 시트 + 스크립트 |
|
색상 |
모든 |
모든 |
모든 |
|
글꼴 |
없음 |
모든 |
모든 |
|
아이콘 |
제한적 |
모든 |
모든 |
|
컨트롤(가시성/배치) |
제한적 |
제한적 |
모든 |
즉시 사용 가능한 플랫폼 옵션
리테일러를 위한 최고의 비디오 플랫폼은 인터페이스에서 비디오 플레이어를 쉽게 사용자 지정할 수 있는 여러 옵션을 제공해야 합니다. 예를 들어, 브라이트코브에서는 다음 사항을 빠르게 조정할 수 있습니다:
|
요소 |
색상 |
아이콘 모양 |
제어 위치 |
가시성 제어 |
|
재생 버튼 |
✔ |
✔ |
✔ |
|
|
컨트롤 바 |
✔ |
|||
|
품질 선택기 |
✔ |
✔ |
||
|
앞으로/뒤로 찾기 |
✔ |
✔ |
||
|
재생 속도 |
✔ |
✔ |
||
|
전체 화면 |
✔ |
✔ |
||
|
볼륨 슬라이더 |
✔ |
✔ |
||
|
썸네일 찾기 |
✔ |
|||
|
그림 속 그림 |
✔ |
✔ |
||
|
소셜 공유 |
✔ |
✔ |
사전 설정 팔레트를 제공하는 일부 기술 솔루션과 달리, 대부분의 동영상 플랫폼에서는 브랜드의 헥스, HSV 또는 RGB 값으로 색상을 완전히 사용자 지정할 수 있습니다. 하지만 일반적으로 플레이어의 글꼴을 변경할 수 있는 기본 옵션은 제공하지 않습니다.
JSON 편집기
일부 플랫폼에는 플레이어 코드를 직접 조작할 수 있는 JSON 편집기가 포함되어 있습니다. 이는 일반적으로 숙련된 개발자의 영역이지만, 누구나 브라이트코브 플레이어에 몇 가지 간단한 조정을 수행할 수 있습니다. (브라이트코브의 플레이어 모듈에서 편집할 플레이어를 선택한 다음 JSON 에디터를 선택합니다.)
- 컨트롤 바를 제거합니다. 리테일러는 동영상 경험이 아닌 제품에 집중하기를 원하기 때문에 플레이어 컨트롤을 완전히 제거하고자 하는 경우가 많습니다. 이는 홈페이지 플레이어나 구매를 방해하지 않으면서 시선을 사로잡는 반복 동영상을 원하는 다른 페이지에 특히 유용합니다. 속성을 추가하기만 하면 됩니다,
"control_bar": false를 누르면 재생 버튼을 제외한 모든 컨트롤이 숨겨집니다.
- 재생 버튼을 스타일화합니다. 재생 버튼에 마우스를 가져갔을 때 반응하는 방식을 변경하려는 브랜드를 위해 브라이트코브는 두 가지 옵션을 제공합니다. 버튼 주위에 글로우 효과를 추가하거나 버튼을 어둡게 만들 수 있습니다. 다음 개체 중 하나를
play_button속성입니다:"hover": "glow"또는"hover": "darken".
참고: JSON으로 속성을 추가할 때는 바로 뒤에 닫는 대괄호(})가 오지 않는 한 쉼표(,)로 해당 속성 및 앞의 모든 개체를 닫아야 합니다. 재생 오류를 방지하기 위해 편집기는 유효하지 않은 코드를 허용하지 않으며 변경 사항을 저장할 수 없습니다.
스타일 시트
대부분의 웹사이트는 브랜드 표준을 설정하기 위해 CSS(Cascading Style Sheet)를 사용합니다. 기본적으로 웹 페이지의 모든 요소에 대한 색상, 글꼴, 아이콘을 조정하기 위해 특정 형식을 따르는 일반 텍스트 문서입니다.
특히 플랫폼에서 기본적으로 제공하는 것보다 더 많은 사용자 지정이 필요한 경우, 브랜드 동영상 플레이어를 CSS를 통해 관리할 수도 있습니다. 그러나 개발자가 아닌 경우 적절한 구문과 값에 대한 지식이 필요하므로 변경하기 전에 개발자와 상의하세요.
CSS 문서를 만들려면 Windows용 메모장 또는 Mac용 텍스트 편집기만 있으면 됩니다.
- 새 문서를 만듭니다(텍스트 편집기의 경우 서식 > 일반 텍스트 만들기 선택).
- 선택기, 속성 및 값 추가
- CSS 파일로 저장합니다(확장자를 .css로 저장하거나 나중에 파일명을 변경하여 저장).
플레이어 모듈로 이동한 다음 플러그인 > 스타일시트를 선택하여 브라이트코브 플레이어를 CSS로 사용자 지정할 수 있습니다. 여기에서 문서를 업로드하면 플레이어가 사이트 어디에 표시되든 그에 따라 브랜딩됩니다. 개발자 리소스가 부족한 분들을 위해 직접 구현할 수 있는 몇 가지 간단한 사용자 지정 방법을 소개합니다.
플레이어 글꼴 변경
동영상 플레이어의 텍스트는 대부분 매우 작습니다(예: 런타임, 호버 텍스트 등). 따라서 신중하게 변경하고, 브랜드 표준이 다른 플랫폼에서의 가독성을 고려하지 않는다면 UX 전문가와 상담하는 것이 좋습니다. 즉, 플레이어 전체에서 글꼴을 변경하려면 다음 사항만 포함된 CSS 문서를 만드세요:
.video-js {
font-family: ;
}
이후 font-family 를 입력하고 콜론(:)과 세미콜론(;) 사이에 원하는 글꼴을 추가합니다. 브라우저마다 다른 글꼴을 지원하며 CSS는 폴백 시스템으로 설계되어 있다는 점에 유의하세요. 최소한 최근 목록을 참조하세요. 일반적인 웹 글꼴을 클릭하고 표시된 대로 원하는 글꼴을 복사합니다. 예를 들어 코믹 산스를 원한다면 CSS 문서는 다음과 같은 모양이 됩니다:
.video-js {
font-family: Comic Sans MS, Comic Sans, cursive;
}
기본 글꼴 모음 라이브러리는 제한되어 있으므로 사용자 정의 글꼴을 사용하려면 CSS 문서에 클래스 또는 소스 URL을 추가해야 합니다. 웹 개발자에게 문의하여 브랜드 글꼴을 올바르게 참조하는지 확인하세요.
모든 컨트롤 제거
제품 동영상을 반복 재생하는 웹 헤더 플레이어를 만들고자 하는 리테일러의 경우 컨트롤과 진행률 표시줄을 제거하는 것만으로는 충분하지 않습니다. 그들은 큰 재생 버튼을 포함한 모든 것을 제거하기를 원합니다. 이렇게 하려면 간단한 CSS 문서 하나만 있으면 됩니다.
.video-js .vjs-big-play-button {
display: none;
}
.video-js .vjs-control-bar {
display: none;
}
또한 플레이어의 스타일링 탭에서 '제목 및 설명 표시'가 선택 해제되어 있는지 확인하세요. 그렇지 않으면 기본적으로 두 가지 모두 플레이어 상단에 표시됩니다.
스크립트
브랜드 동영상 플레이어의 색상과 글꼴을 변경하는 것은 기능을 변경하거나 새로운 속성을 추가하는 것이 아니라 기존 속성을 편집하는 것이므로 비교적 쉽습니다. 동영상 플레이어의 레이아웃을 완전히 변경하려면 스크립트를 사용해야 합니다.
CSS 문서를 만드는 것은 비교적 간단할 수 있지만 자바스크립트는 개발 경험이나 도움 없이 조작할 수 있는 것이 아닙니다. 사내 리소스가 있다면 플레이어 커스터마이징에 대한 플레이어 커스터마이징에 대한 지원 문서 에서 시작하세요. 또한 브라이트코브의 브라이트코브 글로벌 서비스 팀에 연락하여 직접 지원을 받을 수도 있습니다.
