[작업중] VideoPlayer
Definition
정의 | VideoPlayer |
최적화 대상 | Desktop Mobile |
기획 배포 | 진행중 |
디자인 가이드 배포 | - |
개발 코드 배포 | - |
Principle [fixed 기능 영역]
개요
VideoPlayer
anatomy (wireframe)
video+controller = videoplayer
layer
Video
Controller
browser fullscreen → layout 소관 x 비디오플레이어
Basic
type_a
type_b
type_c
bottome right icon button 존재
Fullscreen (moniter fullscreen)
type_a
type_b
type_c
사용안함
Modal option
공간제공
type_a
더보기
type_b
episode & 자막 모달
ClickEvent (web) || touch event (mobile)
VideoJS 화질 옵션 (V셀 only 영역)
option 조합
VODS (vcell)
SLS (vcell)
talk to 타셀
FAST START -
limitRendition : true
startLowInitialPlaylist : true
HIGH QUALITY
startLowInitialPlaylist : false
limitRendition : false
CUSTOM
useBufferBasedABR
limitRendition
useNetworkApi
startLowInitialPlaylist
Anatomy
(add wireframe)
Controller 종류
Basic type_a | Basic type_b | Basic type_c | Fullscreen | |
|---|---|---|---|---|
Purpose | 작은 화면에 적합한 비디오 플레이어 | 크게 표시하기 적합한 비디오 플레이어
| ||
Variation | UM, SW | UW_VODS UW_SLS |
type_a 구조 (wireframe)
type_b 구조 (wireframe)
Modal Options
~~
Click Event & Touch Event
~~
VideoJS 화질 옵션 (변경 불가)
~~
Spec [디자인 영역]
Guide
~~~
Size, Property
Color 구성
Color Key
버튼에는 다양한 상태들이 존재합니다. 버튼을 구성하는 요소들의 컬러 변화로 상태들을 표현합니다.
type_a
textColor | iconColor | baseColor | |
|---|---|---|---|
enabled |
|
|
|
hover |
|
|
|
pressed |
|
|
|
disabled |
|
|
*hover, pressed 액션 없음 |
type_b
textColor | iconColor | baseColor | |
|---|---|---|---|
enabled |
|
|
|
hover |
|
|
|
pressed |
|
|
|
disabled |
|
|
*hover, pressed 액션 없음 |
Properties
PropName | Description | DataType | DefaultValue |
|---|---|---|---|
videoSrc | |||
sourceType | S3 or encoded? | ||
preloadData | [개발자용] - use _ prop | ||
videoID | [개발자용] - 슬라이드배너같이 | String | |
startPlayWith | 재생 시작 시간 | ||
thumbnailSrc | |||
mutedMode | |||
autoPlayMode | |||
reconnectDependency | [개발자용] | ||
playBtnCallback | [개발자용] | ||
closeBtnCallback | [개발자용] | ||
clickOption | |||
basicOption (mode?) | |||
bPlayerType | |||
bTitleMode | |||
~~ | |||
fullscreenOption (mode?) | |||
fPlayerType | |||
fTitleMode | |||
modalOption (mode?) | |||
episodesModal | |||
quality package~ |
Variations
Related PropName | Value | Description & spec | Visual Ref |
|---|---|---|---|
videoSrc | String | //TODO 시각적 기준의 글자수 길이 제한 | |
sourceType | |||
preloadData | |||
videoID | |||
startPlayWith | |||
thumbnailSrc | |||
mutedMode | |||
autoPlayMode | |||
reconnectDependency | |||
playBtnCallback | |||
closeBtnCallback | |||
clickOption | |||
basicOption (mode?) | |||
bPlayerType | type_a | ||
type_b | |||
none | |||
bTitleMode | |||
~~ | |||
browserFullscreen | |||
fullscreenOption (mode?) | fullscreen? | ||
none | |||
fPlayerType | type_a | ||
type_b | |||
none | |||
fTitleMode | |||
fTopRightIconMode | |||
fPrimaryTitle | |||
fSecondaryTitle | |||
fBackMode | |||
fBackUrl | |||
fPlayBarMode | |||
fPlayTimeMode | |||
fEpisodesMode | |||
fSubtitleMode | |||
fMoreMode | |||
fFullScreenMode (icon) | |||
modalOption (mode?) | |||
episodesModal | |||