리테일러에게 브랜드 비디오 플레이어가 필요한 이유

Anything that can increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.

기업이 브랜드를 감사할 때 종종 간과하는 요소는 온라인 동영상 플레이어(OVP)입니다. 오늘날 대부분의 기업은 웹 사이트와 앱에서 동영상 플레이어를 사용하고 있지만, 여전히 브랜드 플레이어를 사용하지 않는 경우가 많습니다. 무료 플레이어를 사용하거나 OVP에 브랜딩 기능이 있다는 사실을 몰랐기 때문일 수 있습니다. 어느 쪽이든, 일반 플레이어는 브랜드 일관성을 떨어뜨리고 잠재적으로 비즈니스 수익에 손해를 끼칠 수 있습니다.

제공업체에서 브랜드 플레이어를 제공하는지 확실하지 않은 경우, 잠시 시간을 내어 모든 플랫폼에서 사용자 지정할 수 있는 요소를 검토해 보세요.

브랜드 동영상 플레이어 요소

오늘날의 온라인 동영상 플레이어는 HTML5를 기반으로 제작되므로 기술적으로 다른 웹 객체와 마찬가지로 사용자 정의할 수 있습니다. 그러나 브랜딩 목적으로 이러한 요소는 일반적으로 다음 네 가지 범주에 속합니다.

• 색상. 색상은 가장 먼저 떠올리는 브랜드 요소 중 하나이지만, 동영상 플레이어는 가장 마지막으로 적용하는 곳 중 하나일 수 있습니다. 재생 버튼부터 볼륨 조절, 진행률 표시줄까지 모든 것을 브랜드 색상에 맞게 사용자 지정할 수 있습니다.
• 글꼴. 코믹 산스를 제외하면 대부분의 사람들은 타이포그래피에 대해 생각해 본 적이 없을 것입니다. 하지만 헬베티카와 Arial의 차이를 구분하지 못하더라도 맥도날드의 'M'이 갑자기 타임즈 뉴 로마체로 바뀌었다면 누구나 눈치챌 것입니다. 플레이어의 런타임 및 호버 텍스트에도 동일하게 적용되며, 잘못된 글꼴은 브랜드 경험을 방해할 수 있습니다.
• 아이콘. 로고 외에도 아이콘은 시각적 브랜딩의 또 다른 중요한 요소입니다. 어떤 브랜드는 곡선을 선호하고 어떤 브랜드는 직선 모서리를 선호합니다. 어떤 브랜드는 섬세한 선을 원하고 어떤 브랜드는 대담하고 무거운 선의 무게를 원합니다. 색상 및 글꼴과 마찬가지로 재생 버튼, 볼륨 조절 및 기타 플레이어 컨트롤도 다양한 아이콘으로 사용자 지정할 수 있습니다.
• 컨트롤. 일부 브랜드의 경우 플레이어 컨트롤 자체가 잘못된 메시지를 전달할 수 있습니다. 너무 많은 컨트롤은 미니멀한 브랜드에 어수선함을 줄 수 있고, 일부 플레이어 레이아웃은 다른 국가의 시청자에게 이질적으로 느껴질 수 있습니다. 그렇기 때문에 동영상 플레이어 컨트롤의 가시성과 위치를 모두 조정할 수 있는 것이 중요합니다.

동영상 플레이어를 브랜딩하는 방법

동영상 플레이어는 여러 가지 방법으로 브랜드에 맞게 맞춤 설정할 수 있습니다. 예를 들어, 웹 개발자가 웹 페이지의 CSS를 인라인으로 빠르게 편집할 수 있습니다. 그러나 이러한 편집은 한 페이지와 그 페이지에서 호스팅되는 플레이어에만 적용되므로 이 방법은 최선의 방법은 아닙니다.

브랜드 동영상 플레이어를 더 효과적으로 제어하려면 동영상 플랫폼 내에서 관리해야 합니다. 이를 위한 세 가지 주요 방법이 있습니다.

즉시 사용 가능한 플랫폼 옵션

리테일러를 위한 최고의 비디오 플랫폼은 인터페이스에서 비디오 플레이어를 쉽게 사용자 지정할 수 있는 여러 옵션을 제공해야 합니다. 예를 들어, 브라이트코브에서는 다음 사항을 빠르게 조정할 수 있습니다:

사전 설정 팔레트를 제공하는 일부 기술 솔루션과 달리, 대부분의 동영상 플랫폼에서는 브랜드의 헥스, HSV 또는 RGB 값으로 색상을 완전히 사용자 지정할 수 있습니다. 하지만 일반적으로 플레이어의 글꼴을 변경할 수 있는 기본 옵션은 제공하지 않습니다.

JSON 편집기

일부 플랫폼에는 플레이어 코드를 직접 조작할 수 있는 JSON 편집기가 포함되어 있습니다. 이는 일반적으로 숙련된 개발자의 영역이지만, 누구나 브라이트코브 플레이어에 몇 가지 간단한 조정을 수행할 수 있습니다. (브라이트코브의 플레이어 모듈에서 편집할 플레이어를 선택한 다음 JSON 에디터를 선택합니다.)

• Remove the control bar.Remove the control bar. Because retailers want to keep the focus on their products, not the video experience, they often want to remove player controls completely. This is especially valuable for homepage players or other pages where you want looping videos that catch the eye without distracting from the purchase. All you need to do is add the property, "control_bar": false, and every control except the play button will be hidden.

• Stylize the play button.Stylize the play button. For brands that want to change how the play button reacts when you hover over it, Brightcove has two options. You can add a glow effect around the button, or you can make the button darken. Just add one of the following objects under the play_button property: "hover": "glow" or "hover": "darken".

Note:Note: When adding properties in JSON, be sure to close them and any preceding objects with a comma (,) unless directly followed by a close bracket (}). To prevent playback errors, the editor won’t accept invalid code and you won’t be able to save changes.

스타일 시트

대부분의 웹사이트는 브랜드 표준을 설정하기 위해 CSS(Cascading Style Sheet)를 사용합니다. 기본적으로 웹 페이지의 모든 요소에 대한 색상, 글꼴, 아이콘을 조정하기 위해 특정 형식을 따르는 일반 텍스트 문서입니다.

특히 플랫폼에서 기본적으로 제공하는 것보다 더 많은 사용자 지정이 필요한 경우, 브랜드 동영상 플레이어를 CSS를 통해 관리할 수도 있습니다. 그러나 개발자가 아닌 경우 적절한 구문과 값에 대한 지식이 필요하므로 변경하기 전에 개발자와 상의하세요.

CSS 문서를 만들려면 Windows용 메모장 또는 Mac용 텍스트 편집기만 있으면 됩니다.

• 새 문서를 만듭니다(텍스트 편집기의 경우 서식 > 일반 텍스트 만들기 선택).
• 선택기, 속성 및 값 추가
• CSS 파일로 저장합니다(확장자를 .css로 저장하거나 나중에 파일명을 변경하여 저장).

플레이어 모듈로 이동한 다음 플러그인 > 스타일시트를 선택하여 브라이트코브 플레이어를 CSS로 사용자 지정할 수 있습니다. 여기에서 문서를 업로드하면 플레이어가 사이트 어디에 표시되든 그에 따라 브랜딩됩니다. 개발자 리소스가 부족한 분들을 위해 직접 구현할 수 있는 몇 가지 간단한 사용자 지정 방법을 소개합니다.

플레이어 글꼴 변경

동영상 플레이어의 텍스트는 대부분 매우 작습니다(예: 런타임, 호버 텍스트 등). 따라서 신중하게 변경하고, 브랜드 표준이 다른 플랫폼에서의 가독성을 고려하지 않는다면 UX 전문가와 상담하는 것이 좋습니다. 즉, 플레이어 전체에서 글꼴을 변경하려면 다음 사항만 포함된 CSS 문서를 만드세요:

.video-js {

font-family: ;

}

After font-family and between the colon (:) and semicolon (;), add the font of your choice. Bear in mind that browsers support different fonts, and CSS is designed with a fallback system. At minimum, reference a recent list of common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:

.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;

}

또한 플레이어의 스타일링 탭에서 '제목 및 설명 표시'가 선택 해제되어 있는지 확인하세요. 그렇지 않으면 기본적으로 두 가지 모두 플레이어 상단에 표시됩니다.

스크립트

브랜드 동영상 플레이어의 색상과 글꼴을 변경하는 것은 기능을 변경하거나 새로운 속성을 추가하는 것이 아니라 기존 속성을 편집하는 것이므로 비교적 쉽습니다. 동영상 플레이어의 레이아웃을 완전히 변경하려면 스크립트를 사용해야 합니다.

While creating CSS docs can be relatively simple, Javascript isn’t something you can manipulate without development experience or assistance. If you have in-house resources to do so, check out our support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.