브라이트코브 네이티브 플레이어 컨트롤

이 항목에서는 브라이트코브 네이티브 SDK를 사용하여 플레이어 컨트롤을 사용하고 사용자 지정하는 방법을 배웁니다.

서문

브라이트코브 웹 플레이어의 미학을 iOS 및 Android 플랫폼 표준과 융합한 브라이트코브 네이티브 플레이어 컨트롤은 즉시 견고한 기능 세트 위에 스타일리시한 외관을 제공합니다.

동적 UI

브라이트코브 네이티브 플레이어 컨트롤은 상황에 관계없이 콘텐츠가 아름다운 사용자 인터페이스에 표시되도록 매우 적응력이 뛰어납니다.

적응형 화면 크기

UI 요소가 명확히보고 사용할 수있을만큼 충분히 큰 것을 보장하는 것은 모든 모바일 응용 프로그램에 매우 중요합니다. 브라이트코브 네이티브 플레이어 컨트롤에는 사용자 인터페이스에 사용할 수 있는 공간을 결정하는 로직이 포함되어 있습니다. 너비가 특정 임계 값 미만으로 떨어지면 컨트롤이 자동으로 전환되어 두 줄 구성을 사용합니다.

플레이어 컨트롤
플레이어 컨트롤
컴팩트한 플레이어 컨트롤
컴팩트한 플레이어 컨트롤

Android

Android용 네이티브 SDK는 장치 화면 크기를 확인하여 플레이어 컨트롤 레이아웃을 설정합니다.

  • 폭이480dp크거나 큰 경우 단선 배치가 사용됩니다.
  • 너비보다480dp작 으면 두 줄의 컴팩트 한 레이아웃이 사용됩니다.

밀도 독립 픽셀 (dp) 에 대한 자세한 내용은 Android의다양한 픽셀 밀도 지원문서를 참조하십시오.

iOS

iOS용 네이티브 SDK는 장치 화면 크기를 확인하여 플레이어 컨트롤 레이아웃을 설정합니다.

  • 폭이450px크거나 큰 경우 단선 배치가 사용됩니다.
  • 너비보다450px작 으면 두 줄의 컴팩트 한 레이아웃이 사용됩니다.

재생 모드

플레이어는 라이프 사이클 전반에 걸쳐 특정 사용자 인터페이스 레이아웃이 필요한 다양한 유형의 콘텐츠를 포함할 수 있습니다. 브라이트코브 네이티브 플레이어 컨트롤에는 콘텐츠 유형이 VoD, Live 또는 Live DVR인지 자동으로 판단하는 로직이 포함되어 있으며, 콘텐츠 유형이 변경되는 재생 목록에서도 사용자 인터페이스를 적절히 조정할 수 있습니다.

VOD (주문형 비디오)

대부분의 재생 경험을 고려한 VoD 인터페이스는 모든 플레이어 UI 디자인의 루트입니다.

아래 이미지를 스크롤하여 브라이트코브 플레이어 컨트롤을 확인합니다. 뷰어의 너비가 작은 경우 컨트롤이 두 줄의 컴팩트 레이아웃으로 전환됩니다.

 

  • 안드로이드 컨트롤
  • 안드로이드 컴팩트 컨트롤
  • 청각 장애인용 자막 단추
  • iOS 컨트롤
  • iOS 컴팩트 컨트롤

브라이트코브 플레이어 컨트롤의 주요 기능은 다음과 같습니다.

  • 재생/일시 중지 단추
    • 콘텐츠 재생 및 일시 중지
  • 뒤로 이동 버튼
    • 누르면 콘텐츠가 10초 뒤로 이동합니다.
  • 향상된 시크바
    • 재생된 콘텐츠를 분홍색으로 표시합니다.
    • 밝은 회색으로 버퍼링된 콘텐츠를 표시합니다.
    • 광고 또는 기타 목적을 위한 마커 사용 지원 (Android)
  • 청각 장애인용 자막 단추
    • 캡션이 감지된 경우에만 표시됩니다. 이 버튼을 선택하면 선택 캡션 설정 메뉴가 나타납니다.
  • 전체 화면 버튼
    • 뷰어가 전체 화면으로 이동하거나 인라인 재생으로 돌아갈 수 있습니다.
  • 에어플레이 버튼 (iOS만 해당)
    • Airplay 장치가 감지된 경우에만 표시됩니다. 이 기능을 사용하면 뷰어가 Airplay 스트리밍을 설정할 수 있습니다.

라이브

Live UI는 사용자가 참여할 수 없는 특정 요소를 숨깁니다. 제거된 요소로는 뒤로 이동 버튼과 시크바 등이 있습니다. 그러나 새로운 “LIVE” 레이블이 추가됩니다. 녹색이면 시청중인 콘텐츠가 라이브 상태임을 나타냅니다.

iOS 라이브 동영상
iOS 라이브 동영상

라이브 DVR

라이브 DVR 형식은 VoD 레이아웃과 동일한 기능을 제공하며, 콘텐츠가 라이브 상태일 때 녹색으로 바뀌고 시청자가 이전 콘텐츠를 시청할 때는 회색으로 표시되는 추가 LIVE 레이블을 제공합니다. 또한 라이브 라벨은 버튼 역할을 하며, 이 버튼을 누르면 가장 최근의 라이브 순간으로 돌아갈 수 있습니다.

iOS DVR 라이브 비디오
iOS DVR 라이브 비디오

사용자 지정

앱의 색상 테마에 맞게 색상이나 스킨을 변경하고 싶으신가요? 문제가되지 않습니다! 브라이트코브 네이티브 플레이어 컨트롤은 쉽게 커스터마이징할 수 있도록 설계되었습니다. 다음은 컨트롤을 사용자 지정할 수 있는 몇 가지 방법입니다.

  • 색상을 바꾸고 나만의 맞춤 버튼을 사용하여 맞춤형 테마를 만들 수 있습니다. Android용 네이티브 SDK를 사용하면 다양한 공통 버튼을 쉽게 포함/제외 할 수 있습니다. 여기서 컨트롤 버튼이 주황색으로 변경되었으며 시크 바는 사용자 정의 이미지를 가지고 있습니다.
    안드로이드 사용자 정의 컨트롤
    안드로이드 사용자 정의 컨트롤
  • iOS용 Native SDK를 사용하면 일반적인 버튼과 레이아웃 세트 중에서 선택할 수 있지만 나만의 맞춤 레이아웃을 만들 수도 있습니다. 다음은 사용자 정의 레이아웃의 예입니다.
    iOS 사용자 정의 컨트롤
    iOS 사용자 정의 컨트롤
  • 또는 버튼을 제거하여 간단하고 깨끗한 레이아웃을 만들 수 있습니다.
    iOS 간단한 컨트롤
    iOS 간단한 컨트롤

빨리 감기 및 되감기 버튼

Brightcove Native SDK를 사용하면 플레이어 컨트롤에 빨리 감기 및 되감기 버튼을 추가할 수 있습니다.

Android

자신만의 맞춤형 미디어 컨트롤러를 생성하기 위해 사용할 수 있는 사전 정의된 ID가 있습니다.

구현 세부 정보는 다음을 참조하세요.

iOS

SDK에는 기본 레이아웃에 뒤로 이동 버튼이 포함되어 있습니다. 자신만의 레이아웃을 만들어 자신만의 앞으로 이동 버튼을 추가할 수도 있습니다.

사용자 정의 버튼의 경우 재생 컨트롤러에서 검색을 수행할 수 있습니다. 찾고자 하는 위치를 결정하려면 현재 시간을 가져오고 10초를 더하거나 뺀 다음(예:) 해당 값을 사용합니다.

구현 세부 정보는 다음을 참조하세요.

접근성

접근성 기능은 UI의 표준 부분으로 제공되며 추가 설정이 필요하지 않습니다.

청각 장애

브라이트코브 네이티브 플레이어 컨트롤은 자막 버튼을 모든 레이아웃에 통합하여 캡션을 사용할 수 있는 경우 캡션 보기 환경을 쉽게 사용자 지정할 수 있도록 합니다. SDK의 자막에 대한 자세한 내용은비디오 형식 및 자막섹션을 참조하십시오.

시각 장애

Android

곧 출시됩니다!

iOS

곧 출시됩니다!