zone@mediaplayer 3 메뉴얼

본 페이지는 버전 3에 대한 메뉴얼 입니다.

-END-

라이센스

본 플레이어는 아이엠지테크와 계약된 고객사에 한하여 사용 할 수 있습니다.
아래 모듈 중 광고모듈, 채팅모듈, 타임스탬프 기능 등은 개별 고객사의 요청에 의해 추가 개발된 사항으로 해당 기능의 커스터마이징시 추가 비용이 발생됩니다.

다운로드

날자	버전	다운로드	내용
2022.12.14	3.1.67	다운로드	인코딩 오류에 대한 플레이어 시크 처리 실시간 아이콘 표시 - catvod.js, catvod.css만 업데이트 PIP (외부모듈) 모듈 추가 (min.js에 포함되어 있지 않음)
2022.11.25	3.1.66	다운로드	잠금버튼 사용시 재생/일시정지 토글, 일반/전체화면 토글을 막을 수 있도록 layout모듈 설정에 lockWithControl옵션을 추가 했습니다. lockWithControl 옵션이 true이면 재생/일시정지 토글, 일반/전체화면 토글을 막을 수 있습니다.
2022.11.15	3.1.65	다운로드	더블탭으로 시크시 시간 추가 되어 시크 되는 기능 추가 라이브 재생에서 자동재생이 안되는 경우 재생/일시정지 시 문제 발생 수정 단, Promise 기능을 브라우저가 지원해야 합니다. Promise 기능을 지원하지 않는 경우 자동재생이 되도록 작업이 필요 합니다.
2022.10.24	3.1.63	다운로드	HLS에서 시작시 화질 자동 선택 부분 수정 HLS에서 자동 화질 구성이 아닌 경우 화질 목록 표시 오류 수정
2022.09.27	3.1.61	다운로드	HLS에서 화질 자동 선택 기능에서 선택시 바로 적용되도록 수정 썸네일에서 최저 화질로 썸네일 되도록 수정 및 특정 주소를 썸네일로 사용 가능하도록 수정
2022.09.16	3.1.60	다운로드	퍼가기 모듈 추가 (별도의 모듈 js파일이 추가 되어 있습니다.) HLS에서 화질 자동 선택 기능 추가 (MAC, iOS 미지원)
2022.08.10	3.1.59	다운로드	삼성 인터넷 브라우저에서 Video Assistant 버튼관련하여 수정되었습니다. (scale등문제 해결) 영상을 확대 축소 이동 할 수 있는 기능을 추가하였습니다. (scale module)
2022.07.19	3.1.58	다운로드	플레이어에 transform scaleX, scaleY를 적용했을 때 프로그래스 정상 표시되도록 수정 (3.1.58) 영상에 오류가 있는 경우 메세지 표시 관련 업데이트 (3.1.58) 삼성 인터넷 브라우저에서 Video Assistant 버튼 표시되는 현상 기능 업데이트 (3.1.57) 모바일에서 재생/일시정지 토글 관련 수정 (3.1.57) 화면이 없는 플레이어에서 콘솔 로그에 오류 표시 수정 (3.1.57) 3.1.57 버전은 사용해서는 안되므로 다운로드를 막았고, 본 목록에서도 제거하였습니다.
2022.04.22	3.1.55	다운로드	썸네일에만 crossOrigin 설정 가능 하도록 수정하였습니다.
2022.02.14	3.1.53	다운로드	키 모듈에서 player페이지와 상위, 하위 iframe의 input tag와 editable element를 모두 찾아 포커싱에 따른 단축키 사용유무 판단 속성을 추가 했습니다. 팝업모드에서 창크기가 일정 수준 이하인 경우에는 창크기, 위치를 저장하지 않도록 수정하였습니다. 프로그래스 타임스탬프 기능에서 callback기능을 추가 했습니다.
2022.01.18	3.1.52	다운로드	프로그래스바 클릭하여 시크시킬 때 클릭 영역 위/아래를 좀더 넓혔습니다. - 3.1.50 stream player에서 자동 썸네일 지원 - 3.1.51 마우스 클릭 시간 체크, 설정 된 시간 이내 마우스 클릭시 이동 거리 체크 제거, 이동 거리 계산하지 않습니다. popup 모드 드래그 시 컨트롤 영역 제외 popup 모드 풀스크린에서는 창의 크기/위치를 저장하지 않도록 수정 유튜브 영상 크기 원복 drag&drop 영상 재생에서 막기 옵션 추가 video 태그에 controlslist='nodownload' 속성 추가 popup fullscreen 상태에서는 창 위치 옮기지 못하도록 수정
2022.01.11	3.1.48	다운로드	드래그 엔 드롭 기능 추가 (플레이어에 드래그하여 재생) - 3.1.46 영상만 회전 할 수 있는 기능 - 3.1.46 HLS 자동 썸네일 기능 (기존에는 mp4만 지원) - 3.1.46 유튜브 타임스탬프(챕터) 기능 추가 - 3.1.46 정지 중 프로그래스 이동시에도 자막 바뀌도록 수정 - 3.1.47 팝업창에서 창위치/크기 기억 할 수 있는 설정 추가 - 3.1.47 볼륨 영역에서 마우스 휠 조작 기능 추가 - 3.1.47 프로그래스바 영역에서 마우스 휠 조작 기능 추가 - 3.1.47 마우스 다운 후 업 할 때 클릭이벤트가 발생하는문제로 토글기능이 불편하는 문제 발생 마우스 다운 후 이동하여 업 하는 경우 클릭이벤트 무시 하도록 수정 - 3.1.47 클릭이벤트로 토글 할 경우 프로그래스바 영역 + offset 영역 위에서만 체크 하도록 기능 추가 - 3.1.47
2021.12.06	3.1.44	다운로드	플레이어에 마우스 오버시 단축키 되도록 수정하였습니다. (버전2에서 지원되던 기능을 다시 추가하였습니다.)
2021.11.10	3.1.43	다운로드	프로그래스바 핸들러 드래그 잘 안되는 현상 수정 하였습니다. 이 기능은 모바일등에서 드레그시 페이지(히스토리) 앞으로/뒤로가기 를 막아야 하는데 이 설정은 고객사가 수동으로 처리 해야하는 가이드 이며, 정확하지 않을 수 있습니다. body{ overscroll-behavior: contain; overflow: hidden; }
2021.11.01	3.1.42	다운로드	버튼 엘리먼트에 대해 div에서 button 엘리먼트로 변경하였습니다. (css 추가: .skin-catvod button { border: solid 0px; }) TAB 키로 버튼 이동 및 포커스 되었을 때 단축키 적용 되도록 변경
2021.10.22	3.1.41	다운로드	더블클릭/더블탭 event 방식 선택 할 수 있도록 변경 컨트롤/볼륨 애니메이션 유무 설정 할 수 있도록 변경 채팅모듈 focus 설정 할 수 있도록 변경
2021.07.16	3.1.40	다운로드	장애인서비스 - 탭키와 기존 서비스 충돌 문제 해결 (기존의 엔터키(배속 초기화)는 사용 할 수 없습니다.)
2021.07.09	3.1.39	다운로드	볼륨모듈수정 - 가로조절막대 관련 설정에 자동재생 기능 추가 fullscreen시 가로 전환 및 네비게이션 감추기 기능 추가 버전2에서 지원하던 showMessage/cleanMessage 함수 추가
2021.06.14	3.1.37	다운로드	화면선택시 키입력 무시되는 현상
2021.04.23	3.1.35	다운로드	워터마크에 마진과 패딩 옵션 추가.
2021.03.31	3.1.33	다운로드	학습시간 모듈 수정 설정은 기존과 같으나 데이타에 real/vod 데이타가 없이 vod로 통일. 기존의 real 값은 overlapRealTime을 통해 받는다. 단축키, 플레이어 선택시에만 작동되도록 수정
2021.03.24	3.1.32	다운로드	슬라이싱 오류 수정 DRM 플레이어 기능 추가
2021.03.17	3.1.29	다운로드	VAST 광고 304에러 처리 학습시간 이어보기시 이어보기 시간 포함되는 문제 이어보기 묻는 팝업창에서 클릭시 자동재생을 원하는 경우 설정 추가.
2021.02.22	3.1.25	다운로드	UI모듈에 hidePosterTime 옵션 추가 (포스터가 사라질 시간 옵션)
2021.02.18	3.1.24	다운로드	추천영상 모듈 추가. disableSeekToFirst 설정 추가.
2021.02.05	3.1.20	다운로드	드래그로 이전, 다음 영상 재생시 slice 애니메이션 기능 추가.
2020.12.23	3.1.14	다운로드	SwitchSource모듈과 광고를 함께 사용할 때 광고처리를 위해 SwitchSource모듈 수정 layout모듈에 osdPlayBtn과 osdReloadBtn 옵션 추가 (정지시 play버튼, 재생종료시 reload버튼)
2020.12.18	3.1.13	다운로드	채팅모듈 추가 SwitchSource모듈과 Quality모듈을 동시에 사용 할 때 Quality모듈 오류 수정
2020.12.11	3.1.11	다운로드	hls에서 error시 ON_ERROR이벤트 발생 추가 라디오에서 화면 표시 오류 수정
2020.11.17	3.1.9	다운로드

시작하기

기본 플레이어 화면 입니다.

[플레이어 A-1]

아래는

[플레이어 A-1]

의

소스 코드

입니다.

[코드 A-1]

먼저 1~3번라인과 같이 mediaplayer.min.js, catvod.js, catvod.css 파일을 include 합니다.
그리고 4번라인과 같이 플레이어가 위치 할 곳에 div 태그를 작성하고
마지막으로 5라인에서 10라인 까지 스크립트를 작성 합니다.
위 스크립트에서 6번과 9번 라인은 삭제 하셔도 되지만 위와 같이
(function(){ 코드 })();
를 사용하여 코드내의 변수를 지역화 시키면 찾기 힘든 버그를 예방 할 수 있습니다.
createMediaPlayer함수를 호출하면 플레이어 객체를 리턴하고 재생 합니다. (소스코드1의 8번라인과 같이)

[표 A-1]

파라미터	설명
첫번째 파라미터 (엘리먼트)	플레이어가 위치 할 element의 query string 입니다. (query string은 css의 query-string과 같습니다.)
두번째 파라미터 (소스)	동영상 주소 url로서 7번 라인과 같이 입력 합니다. null을 입력해도 됩니다.
세번째 파라미터 (설정)	위 코드와 같이 {} 혹은 null을 입력해도 됩니다.
네번째 파라미터는 (callback 함수)	null을 입력해도 됩니다.

지원 브라우저 및 기능

지원되는 소스의 종류

는 mp3, mp4, m3u8(hls), rtmp(flash), youtube 입니다.
각각의 사용법은 아래와 같습니다.

[표 A-2]

소스	사용법	비고
mp3	http://도메인/file.mp3	ie8 이하에서는 flash로 동작 합니다.
mp4	http://도메인/file.mp4	ie8 이하에서는 flash로 동작 합니다.
m3u8	http://도메인/file.m3u8	ie10이하에서는 flash로 동작 합니다.
rtmp	rtmp://도메인/file	flash로 동작 합니다.
youtube	yt://영상ID	ie10 이하에서는 동작하지 않습니다.
player	player://key	아무것도 재생하지 않는 가상의 플레이어 입니다.

지원되는 플레이어 종류

는 아래와 같습니다.

flash
video
hls
youtube
recorder (recorder는 추후 메뉴얼에 추가 합니다.)
player (가상의 플레이어 입니다. 마치 크롬브라우저의 'chrome://'과 비슷하고 일반적으로 사용하지 않으며 현재는 player://blank만 지원 합니다.)

지원되는 브라우저 및 디바이스

는 아래와 같습니다.

ie7, ie8, ie9, ie10, ie11
Edge (MS)
Chrome
Safari
Firefox
Whale (네이버브라우저)
PC
Macosx
Android
iOS
Android, iOS Webview

지원되는 기능

은 아래와 같습니다.

재생/일시정지
정지
이전/다음 영상 보기 (위 예제에서는 버튼이 보이지 않도록 설정 되어 있습니다.)
이전/다음 재생 위치 변경 버튼
프로그래스바
구간반복 (위에서는 클릭시 시작과 끝점이 한번에 표시되지만 설정에 따라 구분하여 표시 할 수 있습니다.)
볼륨 (위에서는 세로모드이며, 가로모드로 변경 가능합니다.)
전체화면 기능
잠금 기능
닫기 기능 (위 예제에서는 숨기도록 설정되어 있습니다.)
배속 기능 (flash 모드에서는 동작하지 않습니다.)
화질 선택 기능
자막 기능 (SMI, SRT, VTT)
책갈피 북마크 및 관리 (위 예제에서는 숨기도록 설정되어 있습니다.)
구간반복 북마크 및 관리 (위 예제에서는 숨기도록 설정되어 있습니다.)
플레이리스트 및 관리 (위 예제에서는 숨기도록 설정되어 있습니다.)
플레이어 선택 기능 (예를들어 mp4와 동일한 youtube영상이 있는 경우 둘 중 하나를 선택 할 수 있도록 하는 기능)
설정 기능 (위 예제에서는 숨기도록 설정되어 있습니다.)
썸네일 기능 (자동,수동 썸네일 기능 제공, 단 IE에서는 자동 썸네일 동작하지 않습니다.)
단축키 기능
미니 플레이어 (위 예제에서는 숨기도록 설정되어 있습니다.)
포스터
라디오
학습시간
워터마크
와이드 모드
터치로 재생 위치 변경 및 볼륨 변경 기능
이어보기 및 자동 이어보기
자동 재생
가상의 재생 시간 (영상의 일부를 전체 영상인 것 처럼 보여주는 기능)
라이브/DVR 모드
플레이어 API
디자인 및 CSS 변경 99% 가능 (단, 워터마크는 설정으로만 가능하고 CSS는 변경 불가 입니다.)
버튼 및 표시 UI 내외부에 추가 가능 (워터마크, 진행바, 볼륨은 제한이 있습니다.)
광고 (AD, VAST)

플레이어 빠르게 이해하기 (구조와 설정)

디렉토리 구조

는 아래와 같습니다.
플레이어는 아래와 같이 4개의 파일과 이미지 파일로 구성 됩니다.

[표 A-3]

디렉토리	설명
mediaplayer/	플레이어의 모든 파일이 포함된 폴더 입니다.
mediaplayer/image	모든 이미지는 이 폴더 안에 있습니다.
mediaplayer/image/catvod/*.png	스킨명(catvod)에 해당하는 모든 이미지 파일이 있습니다.
mediaplayer/js/mediaplayer.min.js	플레이어의 가장 중요한 라이브러리 파일로서 줄여서 'min.js'라고 부릅니다.
mediaplayer/js/flashplayer2.swf	필요시 플래시 모드로 동작 하기 위한 플래시 파일로서 min.js 파일의 위치에 함께 있어야 합니다.
mediaplayer/skin	내부에 스킨명의 폴더가 있고 그 안에 스킨명으로 이루어진 css와 js 파일이 존재 합니다.
mediaplayer/skin/catvod/catvod.css	플레이어에서 사용하는 css 파일 입니다.
mediaplayer/skin/catvod/catvod.js	플레이어에서 사용하는 js 파일로서 헬퍼 파일 입니다. 줄여서 'vod.js'라고 부릅니다.
manual/	메뉴얼 페이지와 관계된 폴더 입니다. (별도로 설명하지 않습니다.)
index.html	메뉴얼 페이지 입니다.

catvod.js

는 모든 설정과 HTML이 파일 안에 존재 합니다.
HTML이 설정에 포함되어 있으므로 HTML을 고객사가 수정 할 수 있음을 의미 합니다.
그러나

플레이어 3 버전

에서는 HTML의 수정 없이 설정을 통해 쉽게 제어 할 수 있습니다.
아래

[코드 A-2]

는 catvod.js 파일에서 많은 부분을 생략하고 주요 부분만 표시 하였고 모두 이해 할 필요는 없으며 수정 할 일도 없을 수 있습니다.

[코드 A-2]

catvod.js의 구조

는 위 코드와 같이 4개의 함수로 이루어져 있으나 주요 함수는 3개 입니다. 특수한 경우 추가 함수가 존재 할 수 있습니다. 예를 들어 아이엠지테크의 앱과 연동이 있습니다.

[표 A-4]

함수명	설명
window.createMediaPlayer	플레이어를 외부(html영역)에서 실행하는 함수(인터페이스)입니다.
createOriginalMediaPlayer	플레이어를 실제로 실행하는 감춰진 함수 (외부에서 호출 할 수 없는 함수) 입니다.
getHtmlResource	플레이어를 구성하는 HTML을 리턴하는 함수로 위 코드에서와 같이 고객사에서 수정 가능 합니다.

플레이어의 설정

은 위

[코드 A-2]

에서 18라인부터 40라인 까지를 의미 합니다. 실제로는 약 400라인 정도의 설정으로 매우 길지만 간단한 구조로 되어 있으므로 이해 할 수 있습니다.
플레이어 설정이라 함은 createOriginalMediaPlayer 함수 내에 있는

var attr = { ... };

영역임을 기억 하시면 됩니다. 아래에 설정 영역만 다시 표시 하였습니다.

[코드 A-3]

플레이어 실행시 설정

위 catvod.js 파일을 수정하지 않고 플레이어를 실행 할 때 설정 할 수 있습니다. 플레이어 실행 함수는 window.createMediaPlayer() 함수 이고 3번째 파라미터가 설정임을 '시작하기' 섹션에서 보았습니다. createMediaPlayer함수의 설정 파라미터에 설정을 하면 그 내용이 catvod.js의 attr 변수(설정)에 적용됩니다.

플레이어 실행시 설정 예제 1

아래에

실행시 설정하는 예제

를 작성했습니다. 구조가 catvod.js 파일의

설정 영역

과 완전히 동일 한 구조임을 이해 하시면 됩니다.

[코드 A-4]

플레이어 실행시 설정 예제 2

설정 예제 1의

[코드 A-4]

와 같이 모든 설정을 지정 할 필요 없이,

필요한 부분만 추가 혹은 수정

할 수 있으며

아래에 그 예제

가 있습니다.
아래 설정은 autoplay를 false로 변경하고, thumbnail 모듈을 사용하지 않음으로 한 것이고, 그 외 설정은 catvod.js의 설정을 사용하는 것 입니다.

[코드 A-5]

우리는

플레이어 설정

을 catvod.js에서 하거나 플레이어 실행시 할 수 있다는 것을 알았습니다. 이제 설정의 이름과 값을 지정하는 방법을 안다면 설정 관련하여 두려울 것이 없습니다.

플레이어 기능 이해하기 (모듈과 설정)

플레이어의 다양한 기능을 사용하기 전에 기능을 이해해야 합니다. 기능은 재생버튼, 중지버튼과 같은 단순한 작업에서 부터 썸네일 혹은 북마크와 같은 복잡한 일을 수행하는 것 까지 다양한 기능이 있습니다.
플레이어는 이러한 기능을 모듈을 통해 처리 합니다.
플레이어의

기능 설정

은

모듈 설정

과 같습니다. 즉, 썸네일 기능을 사용하기 위해서는 썸네일 모듈을 사용해야 하고 해당 모듈에 설정해야 한다는 것 입니다.

모듈 설정의 예제

는 아래와 같습니다.

[코드 A-6]

먼저 설정에 접근해야 합니다. 설정은 json 형식 '{ ... }' 이고 위 코드에서 '{'로 시작해서 '}'로 끝난 json형식인 3번째 파라미터 입니다.
위 코드에서 'module'이 모듈 설정 영역이며, 2번에서 6번라인까지의

{ module: { ... } }

의

module: { ... }

부분이 모듈에 접근 한것 있습니다.

모듈에서 썸네일이라는 기능에 접근하는 것은

{ module: { thumbnail: { ... } } }

에서

thumbnail: { ... }

부분이 썸네일 모듈 영역에 접근 한 것 입니다.
위에서는 썸네일 모듈의 use라는 속성(이름)에 true라는 값을 넣은 것 (설정 한 것) 입니다.

우리는 플레이어의 기능과 모듈이 같다는 것을 이해했고, 기능을 설정한다는 것은 모듈을 설정한다는 것이 같다는 것을 이해 했습니다. 이제 우리는 어떤 모듈(기능)이 있고 그 모듈에 어떤 설정이 있는지 안다면 기능(모듈)을 설정 할 수 있습니다.

어떠한 모듈에도 속하지 않는 기능

에는 width, height, autoplay 등이 있으며 이러한 기능 설정은 이래와 같이 할 수 있습니다. 아래 예제에서 4번째 파라미터 callback을 생략 했습니다.

[코드 A-7]

플레이어 화면과 버튼 이해하기

아래 화면이 플레이어의 일반적인 화면 입니다. (소스를 입력하지 않았기 때문에 재생되지 않습니다.)

[플레이어 A-2]

위의 화면은 크게 3개의 영역으로 나눌 수 있습니다.

[표 A-5]

영역	설명
영상 영역	영상이 재생되는 영역 입니다.
하단 컨트롤 영역	플레이어 하단에 위치하여 플레이어를 제어하기 위한 버튼들이 모여있는 영역 입니다.
확장 컨트롤	플레이어 하단을 벗어나 플레이어 전체에 위치하는 버튼들로서 잠금버튼이 위 샘플 플레이어에 있습니다.

이 메뉴얼에서

버튼이라 함은 순수한 버튼을 의미하는 것을 벗어나 재생시간을 표시하는 것도 버튼

이라고 부릅니다. 예를 들어 시간을 표시하는 것도 버튼이라고 생각 하시면 됩니다.

하단 컨트롤 영역의 버튼이 확장된 영역으로 옮겨지거나 두 영역에 모두 표시 될 수 있으며 심지어 3개 이상 표시 할 수 있으며 완전히 다른 성격의 버튼을 추가 하는 것 또한 가능 합니다. (단, 볼륨과 재생바 영역은 제외 합니다.)

새로운 버튼을 추가 하거나 기존 버튼을 추가/삭제 하는 것이 가능 한 것은 HTML을 사용자가 변경 할 수 있기 때문입니다. HTML은 catvod.js 파일에 getHtmlResource() 함수 내에 있습니다.

getHtmlResource 함수를

아래에 표시

하였습니다.

[코드 A-8]

위의 catvod.js에 있는 getHtmlResource 함수 코드는 실제로는 400라인이 조금 넘는 매우 긴 HTML이지만 중요 부분만 표시 하였습니다.

위 코드에서 보듯이 HTML의 각각의 엘리먼트들의 이름은 class로 되어 있습니다.

먼저 3라인의 첫번째 엘리먼트(노드)는 mpv-player 이고 그 안에 mpv-device(4라인), mpv-bottom(6라인), mpv-foreground(35라인) 등이 있습니다. 또 mpv-bottom 안에는 mpv-toggle-btn(13라인), mpv-stop-btn(14라인) 등이 있습니다.

모든 엘리먼트들의 이름이 class 이름으로 되어 있다는 것을 알게 되었습니다.

아래에

주요 엘리먼트를 나열 하였습니다.

[표 A-6]

엘리먼트	설명
mpv-player	최상위 엘리먼트 입니다. (사실 최상위는 createMediaPlayer함수에서 사용한 첫번째 파라미터 입니다.)
mpv-device	영상이 표시되는 엘리먼트 입니다.
mpv-bottom	화면 하단 영역으로 자막과 하단 컨트롤이 있습니다.
mpv-control-bottom	하단 컨트롤 영역 입니다.
mpv-foreground	기타 UI 들이 있습니다.
확장 컨트롤	위 소스코드에는 없지만 mpv-player 엘리먼트 안에 존재하는 버든들의 모임으로 다른 엘리먼트에 속하지 않는 가상의 컨트롤 입니다.

하단 컨트롤 영역에 버튼이 있다고 해서 하단 컨트롤 버튼이라고 판단하는 것은 아닙니다. 엘리먼트에

mpv-bctrl-btn

className이 있어야 하단 컨트롤 버튼으로 인식 합니다.

[코드 A-8]

의 25라인

mpv-currenttime-text

은 재생시간을 표시하는 버튼으로

mpv-bctrl-btn

className을 포함하고 있으므로 하단 컨트롤 버튼이며 텍스트도 버튼과 다를바 없다는 것을 이해 하시면 됩니다.

확장 컨트롤 버튼

은

mpv-ectrl-btn

className이 있어야 확장 컨트롤 버튼으로 인식 합니다.

[표 A-7]

className	설명
mpv-bctrl-btn	하단 컨트롤 버튼을 의미 합니다.
mpv-ectrl-btn	확장 컨트롤 버튼을 의미 합니다.

우리는 이제 버튼을 하단 컨트롤 버튼 혹은 확장 컨트롤 버튼으로 지정하여 구분하는 방법을 이해하게 되었습니다.

mpv-toggle-btn

은 토글 버튼으로 재생과 일시정지를 처리하는 버튼입니다. 이 버튼을 확장된 영역에 추가해 보겠습니다.
그렇게 하기 위해서는 catvod.js 파일을 수정 해야 합니다.
원본 catvod.js의 위치는 mediaplayer/skin/catvod/catvod.js이며, 인터넷으로 보시려면 여기를 클릭 하세요.
수정된 catvod.js의 위치는 manual/example/004/catvod_004.js이며, 인터넷으로 보시려면 여기를 클릭 하세요.

아래 왼쪽

은 수정된 플레이어 이고,

오른쪽은 코드

은 플레이어 위치 query string과 미디어 소스 url 2개의 파라미터를 사용한 코드 입니다.

[플레이어 A-3]

[코드 A-9]

의 코드로 왼쪽의

[플레이어 A-3]

플레이어가 나타나는 것은 당연한데 플레이어 상단 오른쪽에 플레이/일시정지 토글 버튼이 추가로 생긴 것은 어떻게 한 것일까요?
이는 catvod_004.js 파일(catvod.js 파일을 수정한)의 486라인에

h.push(" <div class='mpv-toggle-btn mpv-button mpv-ectrl-btn mpv-right' title='재생/일시중지 토글 버튼'></div>\n");

코드가 추가 되었습니다.

아래 일부 소스코드

에서 3라인이며, 기존 토글 버튼은 12라인에 있습니다.

[코드 A-10]

즉 기존의

mpv-toggle-btn

이라는 버튼을 하나 더

mpv-player

영역 안에 추가 하였고

mpv-bctrl-btn

className 대신

mpv-ectrl-btn

className을 넣은 것이 위의 샘플 플레이어 입니다. 한번 위의 샘플 플레이어에서 확장된 플레이/일시정지 토글 버튼을 클릭하여 보세요.

이제 우리는 버튼을 추가 하는 방법을 이해하게 되었고 mpv-bctrl-btn과 mpv-ectrl-btn의 차이점이 각각 하단 컨트롤 버튼과 확장 컨트롤 버튼임을 알게 되었습니다.

버튼 숨기기/보이기 이해하기

'시작하기' 섹션을 통해 플레이어를 실행해 보았다면 특정 기능을 추가 하거나 제거하고 싶을 것 입니다. 보통은 버튼과 관련되어 있습니다. 예를 들어 구간반복 기능을 사용하고 싶지 않다면 구간반복 버튼을 제거하고 싶을 것 입니다. '버튼 숨기기/보이기 이해하기' 섹션은 이러한 작업을 이해하기 위한 섹션 입니다.

아래 2개의 샘플 플레이어는 소스를 입력하지 않았기 때문에 재생 되지는 않습니다.

[플레이어 A-4]

[플레이어 A-5]

[플레이어 A-4]

는 구간반복 버튼(하단 5번째 버튼)이 나타나 있고,

[플레이어 A-6]

은 구간반복 버튼이 보이지 않습니다. 이는 설정에 차이가 있기 때문입니다. 먼저 위 플레이어를 실행하는 코드가

아래

에 있습니다.

[코드 A-11]

위 코드

에서 11라인은 #mediaplayer005a 엘리먼트에 플레이어를 표시 하고, 13라인은 #mediaplayer005b 엘리먼트에 플레이어를 표시 합니다.

첫번째 플레이어

의 속성에는 아무런 값이 없고,

두번째 플레이어

의 3번째 파라미터에 repeat 모듈이 있고 그 안에 repeatBtn에 대한 설정 중에 hideButton이라는 속성을 true로 하였기 때문에

오른쪽 플레이어

에 구간반복 버튼이 사라졌음을 알 수 있습니다.

다른 버튼들도 어떤 모듈에 속해 있고 그 모듈의 버튼에 hideButton 속성을 통해 숨길 수 있다는 것을 알 수 있습니다.
따라서 어떤 버튼들이 어떤 모듈에 속해 있고 그 버튼의 이름이 무엇인지 안다면 버튼을 숨기거나 보이게 할 수 있습니다.

이번에는 플레이어 상단 오른쪽에 있는 잠금버튼을 숨기는 플레이어와 코드를 보겠습니다.

[플레이어 A-6]

[코드 A-12]

[플레이어 A-6]

에 잠금버튼과 구간반복 버튼이 사라졌고 그에 대한 설정이

오른쪽 [코드 A-12]

에 있습니다. 다만 4번라인을 보면 잠금버튼이 hideButton이 아니고 hideExtendButton 이라는 것이 하단의 구간반복 버튼과 다릅니다. 이는 하단의 버튼은 하단 컨트롤 버튼이고 그외 영상 영역에 나타나는 버튼은 확장 버튼이기 때문입니다.
만약 하단 컨트롤 영역에 잠금 버튼이 있다면 hideButton으로 숨길 수 있습니다. 실제로 잠금버튼을 하단 컨트롤 영역에 옮기거나 추가하면 hideButton 속성을 사용하게 됩니다.
이는 다른 버튼들 역시 마찬가지이며, 컨트롤 영역의 버튼을 확장 영역에 옮기거나 추가 할 수 있으며 그 때는 hideExtendButton 속성을 사용 합니다.

지금까지 배운 것을 정리 합니다.
mpv-bctrl-btn이 붙은 버튼은 hideButton 속성으로 감출거나 보여지게 할 수 있고
mpv-ectrl-btn이 붙은 버튼은 hideExtendButton 속성으로 설정 할 수 있다는 것 입니다.
일반적 하단 컨트롤 영역의 버튼에 mpv-bctrl-btn을 붙이고, 그외 확장 버튼에는 mpv-ectrl-btn을 붙여야 한다는 것 입니다.

지금까지 우리는 플레이어를 실행하는 방법과 필요한 파일들 그리고 플레이어를 설정하는 개념이 대해 배웠습니다.
이제부터는 설정에는 어떤 속성이 있고, 또 모듈에는 어떤 모듈이 있으며 그 모듈의 속성(설정)에는 어떤 것이 있는지 등을 학습 합니다.

설정

설정에는

아래

와 같이 크게 3가지로 나누어져 있습니다.

[표 B-1]

종류	설명
기본 설정	플레이어의 화면 크기를 지정하거나 자동재생 등을 설정하는 것을 의미 합니다.
모듈 설정	모듈에서 제공하는 설정을 의미 합니다.
소스 설정	소스(미디어주소)가 입력 되어야 알 수 있는 정보를 소스에 설정하는 것을 의미합니다. 소스설정에는 이어보기, 자막, 화질 등이 있습니다.

우리는 기본 설정과 소스 설정을 먼저 배우고 모듈 설정을 학습하게 됩니다.

기본 설정

아래

에 모듈 설정을 제외한 모든 설정을 코드로 표시 하였습니다. 주석으로 처리된 부분은 고급 설정에서 설명 합니다.

[코드 B-1]

width, height

width와 height 속성은 플레이어의 크기를 지정 하는 것으로 문자열 혹은 숫자를 입력 합니다. 숫자인 경우

를 붙여 사용하게 되고, 문자열인 경우 문자열 그대로 사용합니다.
플레이어는 width와 height를 100%로 지정되어 배포되기 때문에 사용자는 width와 height를 수정하거나 플레이어를 감싸고 있는 엘리먼트가 크기를 가지게 됩니다. 예를들어 [코드 A-10]을 보면 크기를 가진 엘리면트에 플레이어 엘리면트를 넣은 것을 확인 할 수 있습니다.

autoplay

자동 재생 유무를 설정 합니다. true이면 자동 재생을 하고, false이면 자동 재생을 하지 않습니다.

debug

디버그 설정으로 debug 속성안에 use라는 추가 속성이 있습니다. 해당 값을 true로 설정하면 개발자도구에 로그가 출력되고, false인 경우 출력하지 않습니다. debug에는 use 이외에 추가 속성들이 있지만 더 알고 싶다면 고급 설정의 디버그 설정을 참고 하세요.

playerType

플레이어는 다양한 브라우저와 다양한 소스(미디어주소)에 따라 내부에 독립적인 플레이어가 동작 합니다. 플레이어 종류에는 flash, video, hls, youtube 등이 존재하는데 해당 플레이어를 강제로 지정하는 것 입니다. 보통은 플레이어가 자동으로 지정하지만 특수한 경우 사용자가 지정해야 하는 경우도 생길 수 있습니다. 예를들어 최근에 네이버브라우저가 생기면서 playerType을 강제 지정 했지만 버전3에서는 자동으로 playerType을 찾습니다. 이와 같이 특수한 경우 사용자가 강제 지정 할 수 있습니다.

[표 B-2]

playerType	설명
flash	플래시로 동작하는 플레이어로 컴퓨터에 flash가 설치되어 있어야 하며, 없는 경우 설치 유도 화면이 나타납니다.
video	IE9이상, 크롬, 사파리 등에서 사용하는 기본 플레이어 입니다.
hls	m3u8 미디어를 플레이 하기 위한 플레이어 입니다. 사파리와 같은 브라우저에서는 video로 동작하기도 합니다.
youtube	유튜브 영상을 플레이 하기 위한 플레이어 입니다. 사파리, 크롬의 경우 제한이 없지만 IE의 경우 IE11에서만 동작 합니다.

skin

skin 속성의 값은 'catvod'로 통일되어 배포됩니다. 다만 특수한 경우 skin명을 변경하여 배포 될 수 있습니다. 이 값은 사용자가 지정한 엘리먼트에 skin-catvod 라는 className을 삽입 합니다. 만약 skin 속성에 dogvod라고 입력하면 사용자 지정 엘리먼트에 skin-dogvod 라는 className이 삽입되는 것을 볼 수 있습니다.
이 값은 css 파일과 연관되어 있습니다.

아래

에 catvod.css 파일 일부 코드를 표시 하였습니다.

[코드 B-2]

를 보면 모든 CSS query 이름을 보면 .skin-catvod로 시작하는 것을 알 수 있습니다. 위의 skin 속성 값이 변경되면 css파일의 skin-catvod도 함께 변경되어야 합니다.

아마도 고객사에서 기본 값을 사용하고 그 위에 변경하고자 하는 부분만 별도의 css를 사용하고자 할 수 있습니다. 이러한 경우 skin값을 변경하지 않고 플레이어 엘리면트에 추가로 className을 추가하여 css를 업데이트 하는 방법이 있습니다.
이렇게 하기 위해서는 createMediaPlayer('#mediaplayer') 에서 사용한 #mediaplayer 엘리면트에 className을 아래 코드 처럼 삽입 할 수 있습니다.

[코드 B-3]

에서와 같이 #mediaplayer 엘리먼트에 skin-clientname className을 삽입하면 2라인의 .skin-catvod.skin-clientname css가 적용되게 됩니다. 이 외에도 이와 같은 방식으로 다양한 css를 적용 시킬 수 있습니다.
따라서 skin 설정은 변경없이 기본으로 사용 하시고 제공해 드린 catvod.css 파일 역시 원본 그대로 사용하시기를 권장하며 수정을 원한 경우 수정 하실 부분만 [코드 B-3]와 같은 방식을 사용하시면 기술지원시 문제 없이 해결 할 확률이 높아 집니다.

아래

에

[코드 B-3]

으로 생성한 샘플 플레이어를 표시하였고, 확장 버튼이 붉은색 테두리로 변경된 것을 확인 할 수 있습니다.

[플레이어 B-1]

zIndex

zIndex는 css에 z-index를 설정하는 것 입니다. 디폴트는 0으로서 z-index를 설정하지 않지만 이 값을 사용하는 경우 플레이어 엘리먼트에 z-index를 설정 합니다. 다만 0으로 되어 있어도 워터마크를 사용하는 경우 무조건 z-index를 설정하도록 되어 있으며 설정값이 0인 경우 1000으로 변경 됩니다. 또한 플레이어 엘리먼트 곳곳에 z-index가 설정 되어 있습니다. 이 값을 변경하고자 하는 경우 catvod.css 파일에서 z-index 값을 수정 하시면 됩니다.
[코드 B-2]의 8라인을 보시면 z-index가 있고 해당 값을 변경 하시면 됩니다.

isLive

플레이어가 라이브(생방송) 모드로 동작 할 경우 이 값을 true로 설정 합니다. 단 플레이어가 생방송과 비디오파일 모두 사용하는 경우 이 값을 false로 설정 하시고 밑에서 배울 소스 설정의 isLive 속성을 사용하여 생방송인지 아닌지를 설정 합니다.

isDVR

이 설정은 seek가능한 라이브방송을 의미 합니다. 즉 이미 보았던 영역에 대해서는 seek가능한 플레이어 임을 의미 합니다. 이 설정을 하기 위해서는 isLive 설정을 false로 하고 isDVR을 true로 설정해야 합니다. isLive가 true이면 isDVR은 판단하지 않습니다.

crossOrigin

flash모드에서 동작하지 않으며 video태그에 접근시 필요한 설정으로 이 옵션을 제거하면 video태그에 접근하여 캡쳐등의 작업을 할 수 없습니다. (본 플레이어는 video태그로 별도의 작업을 수행하지 않기에 위 설정은 고객사의 별도 작업 지원을 위한 것 입니다.)

10.

poster

플레이어 영상 영역에 포스터 이미지를 표시하기 위해 본 속성에 이미지 주소를 넣습니다. 이 속성은 소스 설정의 poster 속성에서도 지정 할 수 있습니다. 버전2에서는 poster모듈이 처리 하였으나 버전3에서는 poster모듈이 사라지고 ui모듈에서 처리하는 것으로 변경되었습니다. 기존의 복잡한 기능은 모두 사라졌고 단순히 포스터만 화면에 표시 합니다.

11.

nativeFullscreen

iOS와 android에서 사용되는 속성으로 풀스크린 진입시 iOS와 android의 기본플레이어로 fullscreen이 되기를 원하는 경우 이 속성을 설정 합니다. 이때 nativeFullscreen 속성에 원하는 기기 (iOS, android) 속성을 넣어 true 혹은 false를 사용 합니다.

12.

disableSeekToFirst

영상이 끝나면 영상의 맨앞으로 이동 시킵니다. 이를 막고자 한다면 이 값을 true로 설정 하시면 됩니다. 이 속성은 소스설정에서도 지정 할 수 있으며 소스설정이 우선 합니다. (3.1.24 버전)

소스 이해하기

소스 설정을 학습하기 전에 소스에 대한 이해가 필요 합니다. 소스는 쉽게 설명하면 재생되어야 할 영상 파일이 있는 주소를 의미 합니다. 영상에는 다양한 파일이 존재하는데 웹에서는 보통 mp4, mp3(음성전용), 애플에서 개발한 m3u8이 있으며 최근에는 flash에서 html5로 넘어가면서 사용이 거의 없는 rtmp(flash 전용)도 있습니다. 또한 본 플레이어는 유튜브 영상을 재생하기 위한 플레이어도 제공하고 있습니다.

아래 플레이어

는 유튜브 영상을 재생하기 위한 플레이어 입니다.

[플레이어 B-2]

유튜브 영상 아이디를 입력 하세요. 유튜브 영상만 됩니다.

yt://

아래

는

[플레이어 B-2]

를 재생시키는 소스 코드 입니다.

[코드 B-4]

위 소스코드

는 재생버튼을 클릭하면 input의 값(소스)을 입력 받아 19라인의 player.source 함수를 이용하여 소스를 전달 합니다.

기존 코드라면 createMediaPlayer(element, 'yt://youtube-id'); 와 같이 호출 했겠지만, 본 페이지가 메뉴얼이다 보니 많은 양의 플레이어가 있어 사용자가 재생 버튼을 클릭 한 경우에만 재생 시키기 위한 조치 입니다. 그리고

[코드 B-4]

에서 16라인과 17라인에 설정이 있지만 생략 가능 합니다.

위 소스코드에서는 yt://을 이용하여 유튜브 영상을 재생하였지만,
http:// 혹은 https://를 이용하여 mp4와 m3u8 파일 등 재생 할 수 있습니다.

[코드 A-9]

에 샘플 코드가 있습니다.

정리하면 소스는 미디어 주소이고 그 주소를 createMediaPlayer 함수의 2번째 파라미터에 전달 하거나, player객체의 source 함수에 전달 할 수 있음을 보았습니다.
다만 위에서는 스트링(문자열)으로 소스를 전달 했지만 소스를 전달을 json형식(

{ ... }

)으로 해도 됩니다.

즉 아래의 방식

[코드 B-5]

은

[코드 B-6]

와 완전히 동일 합니다.
플레이어는 소스가 문자열로 들어오면 위와 같이 json 형식으로 변환하여 사용하기 때문에 완전히 동일 한 것 입니다.

플레이리스트의 소스

createMediaPlayer 함수의 2번째 파라미터에 문자열이든지 json형식의 소스든지 배열로 된 소스를 지정 할 수 있습니다.
아래의 2개의 예제는 완전히 같습니다.

[코드 B-7]

window.createMediaPlayer('element', [
'http://도메인/1.mp4'
,'http://도메인/2.mp4'
]);

[코드 B-8]

window.createMediaPlayer('element', [
{src: 'http://도메인/1.mp4'}
,{src: 'http://도메인/2.mp4'}
]);

실제로 플레이어는 소스 하나만 입력하여도 배열로 변환하여 사용 합니다.

소스 설정

소스에 이어보기 등의 소스 설정을 위해서 소스가 목록으로 되어 있어도 소스 각각에 설정해야 합니다.

아래

는 소스 설정 코드로서 주석처리 된 부분은 모듈 설정에서 설명 합니다.

[코드 B-9]

isLive

입력되는 소스가 라이브(생방송)인 경우 true로 설정 합니다. 플레이어는 리이브 모드인 경우 사용자가 지정한 element에 'mpv-live-screen' className을 추가하여 라이브 모드인 경우 불필요한 UI를 숨기도록 합니다.
실제로 라이브 모드로 UI를 변경 시키는 것은 catvod.css 파일이 처리하고 플레이어는 단순히 mpv-live-screen className을 추가합니다. (버전3 이상에서만 가능합니다.)

아래

는 catvod.css 파일에서 mpv-live-screen className관련을 표시하였습니다.

[코드 B-10]

isDVR

입력되는 소스가 라이브(생방송)이고 이미 시청한 구간에 한해 seek가능한 경우 이 설정을 true로 설정 합니다. 주의사항으로 이 경우 isLive 옵션을 false로 설정하고 isDVR을 true로 설정해야 합니다. 플레이어는 DVR 모드인 경우 사용자가 지정한 element에 'mpv-dvr-screen' className을 추가하여 불필요한 UI를 숨기도록 합니다.
실제로 DVR 모드로 UI를 변경 시키는 것은 catvod.css 파일이 처리하고 플레이어는 단순히 mpv-dvr-screen className을 추가합니다. (DVR은 버전3에서만 지원하는 기능으로 버전2에는 없습니다.)

continueTime, autoContinueTime

continueTime과 autoContinueTime는 이어보기 관련 속성으로 이어볼 시간을 초단위로 입력 합니다. 보통 이어보기는 재생전에 사용자에게 이어보기 할 것인지를 묻는 컨펌창이 뜨고 그 결과에 따라 이어보기를 진행하게 됩니다.
autoContinueTime은 사용자에게 묻지 않고 바로 이어보기를 진행 합니다. 그러나 continueTime은 사용자에게 묻는 팝업창이 뜨게 됩니다. 이 때 팝업창에 사용자에게 이어보기 할 것인지를 묻는 텍스트를 변경하고자 한다면 continueTime모듈 설정을 참조하세요. (기존 버전에는 모듈에 별도의 설정이 필요했지만 버전 3이상 부터 설정없이 플레이어가 팝업창을 띄웁니다.)
이어보기 설정에서 continueTime과 autoContinueTime에서 둘 중 하나만 사용하시면 됩니다.

virtualTime

virtualTime은 가상의 재생시간을 의미 합니다. 예를 들어 1시간 짜리 영상을 10분 짜리 영상으로 보이게 하고자 할 경우 그 시작과 끝 시간을 초단위로 설정 합니다.

[코드 B-9]

의 6라인에서 start의 60은 시작점이 60초이고, end의 120은 끝점이 120초를 의미 합니다. 결국 사용자는 60초 짜리 영상으로 알고 시청하게 됩니다.

주의사항1

으로 continueTime 및 북마크 등 모든 설정은 virtualTime에 저징된 60초로 이루어진 별도의 영상과 같다는 것 입니다.
예를 들어 이어보기 속성이 10초로 되어 있다면 [코드 B-9]에서 시작점 60초를 기준으로 70초 부터 본다는 것이며 (사용자 관점에서 10초 후 이어보기 합니다.), 북마크 역시 마찬가지 입니다. 사용자가 20초로 북마크를 설정 했다면 실제 시작점 60초이후 20초에 표시 된다는 것 입니다. 나아가 모든 설정이 virtualTime 기준으로 동작 합니다.
한가지 예외는 자막으로 시작점 60초(사용자 관점 0초)에서 자막파일 60초의 자막을 보여 주고 10초 지난 경우 결과적으로 70초의 자막을 보여 주게 됩니다.
정리하면 사용자는 플레이어가 virtualTime으로 동작하는지 알지 못하며 심지어 플레이어 역시 현재 영상이 virtualTime으로 동작하는지 알지 못합니다. (개념상 알 수 없다는 것이지 알 수 있는 API가 존재 합니다.)

주의사항2

로 플래시 모드로 동작시 플래시 모드의 특성상 seeking과 관련된 설정이 제대로 이루어져야 합니다. 이는 isPseudo 설정과 관련있는데

플래시 섹션

에서 상세히 설명 합니다.

아래는 1시간 이상의 영상이지만 virtualTime 설정으로 25초의 영상으로 보이도록 한 것입니다.

[플레이어 B-3]

[코드 B-11]

progressTime

progressTime은 사용자가 재생한 위치까지만 seek가능하게 하는 설정입니다. continueTime, autoContinueTime값이 설정된 경우 해당 위치까지 seek 가능 합니다. 단 progressTime이 true가 아닌(true 혹은 0보다 큰 숫자 - 0이면 false로 인식)경우 continue,autoContinue와 상관없이 progressTime 위치까지 시크 가능합니다. 물론 이후 재생을 하였다면 이후 재생위치까지 seek 가능 합니다.

thumbnail

이 설정은 썸네일 모듈이 설정되어 있어야 동작하는 속성으로 이 속성에 false가 아니면 썸네일이 표시 됩니다. 즉 기본적으로 썸네일을 표시 합니다.

썸네일 모듈 참고
버전2에서는 enableThumbnail이였으나 thumbnail으로 변경하였습니다.

autoHeight

이 속성은 플레이어의 크기를 영상의 크기에 맞게 조절하는 설정입니다. 따라서 영상의 크기를 알아야 하고 그 시점은 영상을 입력하는 순간이기 때문에 이 설정이 소스 설정에 있습니다.
이 속성은 autoHeightResizeable 속성을 함께 이해하고 써야 합니다.

autoHeightResizeable

이 속성은 autoHeight와 같습니다. 다만 autoHeight는 영상 입력 후 최초1회에만 플레이어의 크기를 영상의 크기로 맞추지만, autoHeightResizeable는 윈도우의 크기등이 변경되면 변경된 플레이어의 크기와 영상의 크기를 다시 조절 합니다. 보통은 autoHeight와 autoHeightResizeable를 같이 사용하여 true로 설정 하시면 됩니다.

title

제목 입력시 영상 상단 좌측에 표시 됩니다. (HTML 혹은 CSS를 수정하여 위치 변경 가능 합니다)

ui 모듈의 titleText 속성 참고

10.

repeatWatchTimeSeekable

구간반복 모듈과 함께 쓰이는 속성으로 이 값이 true이면 시청자가 본 마지막 시간이 구간반복의 끝점으로 자동 변경 됩니다. 즉 사용자가 시청을 계속하면 그 시간이 구간반복의 끝점으로 업데이트 됩니다. 단 사용자가 앞으로 시크를 한다면 시청자가 본 마지막 시간이 아니므로 구간반복 끝점은 업데이트 되지 않습니다.

11.

poster

영상에 포스터가 있는 경우 포스터 이미지의 주소를 입력 합니다. 이 설정은 기본설정에서도 지정 할 수 있습니다. (기본설정의 poster 속성 참조)

아래

는 포스터를 지정한 플레이어 입니다.

[플레이어 B-4]

아래

는

[플레이어 B-4]

의 소스 코드 입니다.

[코드 B-12]

12.

mute

소스 재생 시작시 소리를 무음이 되도록 설정 하려면 이 속성을 true로 설정 합니다.

13.

disableSeekable

사용자의 seeking을 완전히 막습니다.

14.

disableSeekToFirst

영상이 끝나면 영상의 맨앞으로 이동 시킵니다. 이를 막고자 한다면 이 값을 true로 설정 하시면 됩니다. (3.1.24 버전)

14.

preview

영상의 전체가 아닌 일부를 미리보기 형식으로 제공하기 위한 설정 입니다. preview설정 안에 data 배얼 안에 제공할 영상의 start와 end 시간을 지정합니다. 이 설정은 progress모듈의

preview설정

과 함께 사용합니다.

15.

소스 재생시 재생되어야 할 광고에 대한 설정을 합니다. 이 설정은

ad 모듈

과 함께 사용 합니다. 보통 이 설정은 고정된 설정으로 영상 시작 전, 재생 중, 재생 종료 후 재생될 광고를 start, middle, end 설정을 위 소스와 같이 배열로 설정 합니다. 고정하지 않고 사용하려면 ad 모듈의 설정을 참고 할 수 있습니다.

속성	설명
start	영상 재생전에 실행되어야 할 광고 영상(소스)를 배열로 입력 합니다.
end	영상 재생 완료 후에 실행되어야 할 광고 영상(소스)를 배열로 입력 합니다.
middle	영상 재생 중에 실행되어야 할 광고 영상(소스)를 배열로 입력 합니다.
소스설정	start,end,middle의 소스설정에서 사용되는 모든 속성을 함께 사용 할 수 있습니다.
소스설정/src	광고 영상의 주소로 이는 video,hls,flash,youtube등의 본 플레이어의 소스와 완전히 동일하며 start, end, middle에 공통적으로 사용 됩니다.
소스설정/url	광고 영상과 관계된 url로 보통 광고를 클릭하면 새창에 표시될 웹페이지 주소를 입력하며 start, end, middle에 공통적으로 사용 됩니다.
소스설정/adTime	재생 중에 표시되는 광고와 관련되어 특정 시간에 특정 광고가 재생되어야 하는 경우에 사용하는 특정 시간입니다. middle에서 사용 됩니다.
소스설정/skipTime	start,end,middle의 각각의 소스설정에 skipTime 속성은 광고를 스킵하기 위한 속성으로 ad모듈의 skipTime과 같으나 소스에 skipTime을 설정하므로서 소스마다 다른 skipTime 값을 지정 할 수 있습니다. 미 지정시 ad모듈의 skipTime을 사용합니다.
소스설정/detailTime	start,end,middle의 각각의 소스설정에 detailTime 속성은 광고 자세히 보기 버튼이 언제 표시 될지 그 시간(초단위)를 지정 합니다. 미 지정시 ad모듈의 detailTime을 사용합니다.

16.

vast

소스 재생시 재생되어야 할 광고(VAST)에 대한 설정을 합니다. 이 설정은

vast 모듈

과 함께 사용 합니다. (3.0.10버전)

속성	설명
start	영상의 시작전에 광고를 재생하고자 하는 경우 설정 합니다.
start/size	영상의 시작전에 보여줄 광고의 수를 설정 합니다.
end	영상 재생 완료 후에 실행되어야 할 광고를 설정 합니다.
end/size	영상 재생 완료 후에 실행되어야 할 광고 수를 설정 합니다.
middle	영상 재생 중에 광고를 재생(중간광고)하고자 하는 경우 설정 합니다.
middle/times	영상 재생 중에 표시 할 광고 목록을 여기에 설정 합니다.
middle/times/time	중간광고가 나타날 영상의 시간(초단위)를 넣습니다.

17.

introTime

영상의 인트로 시간(초단위)을 스킵 할 수 있는 설정을 하고자 하는 경우 사용 합니다. 인트로 시간이 설정되면 사용자 정의 엘리면트에 mpv-intro-screen className을 삽입합니다. 인트로 시간을 벗어나거나 스킵버튼을 클릭하면 mpv-intro-screen className은 사라집니다. (3.0.10버전)

17.

radio

라디오 설정으로 라디오 모듈이 정상적으로 동작해야 합니다. radio 모듈 설정에 어떠한 설정이 없어도 소스설정에 라디오 설정이 되어 있으면 라디오 모듈이 동작합니다. (3.0.18버전)
라디오 모듈의 설정이 보통은 중요하지 않지만 hideScreen을 사용하는 경우 라이오 모듈 설명을 꼭 확인해야 합니다.

속성	설명
hideScreen	true 혹은 false로 true이면 영상영역이 사라지고 하단 컨트롤 영역만 나타납니다. (이는 backgroundImage 설정이 되어 있어도 영상영역을 감추게 됩니다.)
backgroundImage	hideScreen이 false인 경우 이 값의 이미지가 영상영역에 나타납니다.

플레이어 객체

플레이어 객체라 함은 코드 상에서 플레이어 그 자체를 의미 합니다. 플레이어 객체를 얻어 플레이어의 모든 것을 제어 할 수 있습니다.
아래

[코드 B-13]

는 플레이어 객체를 얻는 2가지 방법 입니다.

createMediaPlayer 함수가 리턴하는 객체가 player객체 입니다.
createMediaPlayer 함수 첫번째 파라미터에 지정한 엘리먼트의 zonemediaplayer 속성이 player객체 입니다.

아래 코드

의 player1과 player2는 완전히 같은 player 객체 입니다.

[코드 B-13]

(function(){ var player1 = window.createMediaPlayer('#mediaplayer', source); var player2 = document.getElementById('mediaplayer').zonemediaplayer; })();

스타일시트 (CSS)

플레이어는 최소한의 기능만을 하고 화면에 보여지는 모든 처리는 CSS가 담당 합니다. 따라서 제공해 드리는 catvod.css 파일과 HTML이 중요하며 CSS의 className의 약속이 또한 중요 합니다.

아래

는 클래스이름을 정리한 목록 입니다.

[표 C-1]

클래스이름	아이디	설명
skin-catvod		플레이어가 위치할 엘리먼트에 설정된 스킨이름으로 플레이어가 자동으로 삽입하는 클래스로 설정에 따라 변경 될 수 있습니다.
mpv-player		catvod.js에서 설정된 HTML으로 만들어진 엘리먼트로 플레이어의 주 화면 입니다.
mpv-device		영상이 표시 되는 엘리먼트 입니다.
mpv-title-text-btn	titleTextBtn	영상의 제목이 표시되는 영역 입니다.
mpv-title-text	titleText	영상의 제목이 실제로 표시되는 엘리먼트 입니다.
mpv-osd		OSD 영역으로 플레이어의 상태를 표시하는 엘리먼트 입니다. (다음 버전에 다시 정리 합니다.)
mpv-osd-loading	osdLoadingBtn	OSD 영역의 loading icon(button) 입니다.
mpv-osd-toggle	osdToggleBtn	OSD 영역의 toggle(재생/일시정지) icon(button) 입니다.
mpv-exit-btn	exitBtn	플레이어 종료 버튼 입니다.
mpv-lock-btn	lockBtn	화면 잠금 버튼 입니다.
mpv-openlayer-rollback-btn	openLayerRollbackBtn	미니플레이어 상태에서 이전으로 돌아가기 버튼 입니다.
mpv-openlayer-close-btn	openLayerCloseBtn	미니플레이어를 닫는 버튼 입니다.
mpv-config-btn	configBtn	설정 버튼 입니다.
mpv-flash-icon	flashBtn	플래시 아이콘으로 플래시 사용시 나타나는 아이콘 입니다.
mpv-subtitle-display		자막이 표시되는 영역 입니다.
mpv-progress		진행바가 표시 되는 영역 입니다.
mpv-repeat-start-marker		구간반복 시작 지점 버튼 입니다.
mpv-repeat-end-marker		구간반복 끝 지점 버튼 입니다.
mpv-thumbnail		썸네일이 표시 되는 영역 입니다.
mpv-thumbnail-image		썸네일 이미지가 표시되는 엘리면트 입니다.
mpv-thumbnail-time		썸네일 시간이 표시되는 엘리면트 입니다.
mpv-toggle-btn	toggleBtn	재생/일시정지 버튼 입니다.
mpv-stop-btn	stopBtn	정지 버튼 입니다.
mpv-previous-btn	previousBtn	이전 영상 보기 버튼 입니다.
mpv-next-btn	nextBtn	다음 영상 보기 버튼 입니다.
mpv-previous-skip-btn	previousSkipBtn	뒤로 재생 위치 변경 버튼 입니다.
mpv-skip-input	skipInput	재생 위치 변경시 이동 할 숫자 입력 박스 (초단위) 입니다.
mpv-next-skip-btn	nextSkipBtn	앞으로 재생 위치 변경 버튼 입니다.
mpv-repeat-btn		구간반복 버튼 입니다.
mpv-volume-layout		볼륨을 표시하는 영역 입니다.
mpv-currenttime-text	currentTimeText	현재 재생 시간을 표시하는 엘리먼트 입니다.
mpv-duration-text	durationText	영상의 총 재생 시간을 표시하는 엘리먼트 입니다.
mpv-fullscreen-btn	fullscreenBtn	전체화면 토글 버튼 입니다.
mpv-wide-btn	wideBtn	와이드 모드 토글 버튼 입니다.
mpv-openlayer-btn	openLayerBtn	미니플레이어 전환 버튼 입니다.
mpv-config-layout	configLayout	설정 영역 입니다.
mpv-config-btn	configBtn	설정 버튼 입니다.
mpv-config-menu	configMenu	설명 메뉴 (목록) 영역 입니다.
mpv-playlist-layout	playlistLayout	플레이리스트 영역 입니다.
mpv-playlist-menu-btn	playlistMenuBtn	플레이리스트 메뉴를 보여주는 버튼 입니다.
mpv-playlist-add-btn	playlistAddBtn	플레이리스트에 소스를 추가 하는 버튼 입니다.
mpv-playlist-menu		플레이리스트 목록 영역입니다.
mpv-repmark-layout		구간반복 북마크 영역 입니다.
mpv-repmark-menu-btn	repmarkMenuBtn	구간반복 북마크 메뉴를 보여주는 버튼 입니다.
mpv-repmark-add-btn	repmarkAddBtn	구간반복 북마크에 소스를 추가 하는 버튼 입니다.
mpv-repmark-menu		구간반복 북마크 목록 영역입니다.
mpv-bookmark-layout		책갈피 북마크 영역 입니다.
mpv-bookmark-menu-btn		책갈피 북마크 메뉴를 보여주는 버튼 입니다.
mpv-bookmark-add-btn	bookmarkAddBtn	책갈피 북마크에 소스를 추가 하는 버튼 입니다.
mpv-bookmark-menu	bookmarkMenuBtn	책갈피 북마크 목록 영역입니다.
mpv-switchsource-layout		플레이어선택 영역 입니다.
mpv-switchsource-btn	switchSourceBtn	플레이어선택 메뉴를 보여주는 버튼 입니다.
mpv-switchsource-menu		플레이어선택 목록 영역입니다.
mpv-rate-down-btn	rateDownBtn	배속을 감속 시키는 버튼 입니다.
mpv-rate-up-btn	rateUpBtn	배속을 증가 시키는 버튼 입니다.
mpv-rate-text	rateText	배속을 표시하는 텍스트 영역 입니다.
mpv-rate-layout		배속 영역 입니다.
mpv-rate-btn	rateBtn	배속 목록을 보기 위한 버튼 입니다.
mpv-rate-menu		배속 목록(메뉴) 영역 입니다.
mpv-quality-layout		화질 버튼/메뉴 영역 입니다.
mpv-quality-btn	qualityBtn	화질 목록을 보기 위한 버튼 입니다.
mpv-quality-menu		화질 목록(메뉴) 영역 입니다.
mpv-subtitle-layout		자막 버튼/메뉴 영역 입니다.
mpv-subtitle-btn	subtitleBtn	자막 목록을 보기 위한 버튼 입니다.
mpv-subtitle-menu		자막 목록(메뉴) 영역 입니다.
mpv-bookmark-input-layout		책갈피 북마크 입력 화면 입니다.
mpv-bookmark-title-input		책갈피 북마크 제목 입력 태그 입니다.
mpv-bookmark-time-input		책갈피 북마크 시간 입력 태그 입니다.
mpv-bookmark-confirm-btn		책갈피 북마크 입력 확인 버튼 입니다.
mpv-repmark-input-layout		구간반복 북마크 입력 화면 입니다.
mpv-repmark-title-input		구간반복 북마크 제목 입력 태그 입니다.
mpv-repmark-start-input		구간반복 북마크 시작 시간 입력 태그 입니다.
mpv-repmark-end-input		구간반복 북마크 종료 시간 입력 태그 입니다.
mpv-repmark-confirm-btn		구간반복 북마크 입력 확인 버튼 입니다.
mpv-playlist-input-layout		플래이리스트 입력 화면 입니다.
mpv-playlist-title-input		플래이리스트 제목 입력 태그 입니다.
mpv-playlist-src-input		플래이리스트 주소 입력 태그 입니다.
mpv-playlist-confirm-btn		플래이리스트 입력 확인 버튼 입니다.
mpv-touch-helper		터치로 볼륨, 재생위치 변경에 대한 도움말 영역 입니다.
mpv-alert-layer		경고창 화면 입니다.
mpv-confirm-layer		확인창 화면 입니다.
mpv-flash-layer		플래시플레이어 다운로드 안내 화면 입니다.
mpv-bctrl-btn		하단 컨트롤 버튼임을 나타내는 클래스 입니다.
mpv-ectrl-btn		확장 버튼임을 나타내는 클래스 입니다.
mpv-screen		영상이 출력되는 영역과 같아야 하는 영역임을 나타내는 클래스 입니다.

모듈 이해히기

모듈 이해하기 섹션은 개발자 분들이 이해 할 수 있는 섹션 입니다. 다른 분들은 모듈이 기능과 같다는 정도만 이해하시고 플러그인 이해하기 섹션으로 건너가셔도 됩니다.
개발자 분들은 자바스크립트 기초만 알고 있어도 이해 할 수 있는 어려운 기술은 아닙니다.

zone@mediaplayer는 버전 2부터 모듈로 구성되어 있습니다. 모듈은 크게 2가지로 나뉘는데 첫째 Object를 생성하기 위한 Class와 같고 둘째 플레이어에 기능을 삽입하기 위한 플러그인과 같습니다. 본 플레이어는 위 2가지 성격을 모두 가지고 있고 심지어 가장 안쪽의 플레이어 객체를 재구성 할 수 있도록 인터페이스가 구성되어 있습니다.

[표 C-2]

모듈의 구분	설명
Class	Object를 생성하기 위한 코드 혹은 객체(Object)의 구조를 의미 합니다. Javascript에서는 prototype을 가지는 함수를 의미하며 new로 객체 생성 바로전의 함수 그 자체입니다. 결국 new로 객체를 생성하기 위한 방법으로 모듈을 제공 하는 것 입니다.
플러그인	플레이어에 삽입하여 플레이어의 기능을 수행하는 Class 혹은 객체 입니다.

모듈에 접근하기 위해서는 모듈을 처리/관리 할 수 있는 객체를 가져와야 합니다. 그 객체는 window.getDframework() 이라는 함수 호출로 가져 올 수 있습니다.

아래

에 샘플 코드가 있습니다. getDframework() 을 통해 얻은 객체로 부터 'imgtech.media.Media' className을 가지는 Class를 가져오는 코드 입니다.

[코드 C-1]

(function(){ var D = widnow.getDframework(); var Media = D.module('imgtech.media.Media'); })();

Dframework은 모듈을 관리/처리하는 부분은 제약 사향이 있지만 본 플레이어를 개발/운영함에 있어 본 개발자 손에 잘 익었기에 사용하고 있습니다.

개발자 분들은 dframework이 공개된 라이브러리가 아니기 때문에 검색해서 찾을 필요가 없으며, 모듈 관련해서만 dframework을 사용하시면 됩니다. 가끔 저의 코드에 dframework을 jquery 처럼 사용하는 경우가 있는데 해당 경우에는 jquery를 사용하셔도 결과는 같습니다.

아래

에 query문을 통해 element을 얻는 방법으로 차이점을 보면 dframework에서는 element를 바로 리턴 하고 jquery는 배열로서 검색된 0번째 값을 사용하는 것이 다릅니다. 배열로 얻기 위해서는 queryAll이라는 함수를 별도로 사용해야 합니다.
다시 한번 말씀 드리자면 jquery를 사용하셔도 차이가 없기에 앞으로는 dframework 설명은 모듈에 한하여 설명 합니다.

[코드 C-2]

(function(){ var D = widnow.getDframework(); var m1 = D.query('#mediaplayer'); var m2 = D.queryAll('#mediaplayer'); var m3 = $('#mediaplayer')[0]; })();

[코드 C-2]

에서 getDframework을 통해 dframework 객체를 얻고 그 값을

변수에 넣습니다.
앞으로

대문자 D

는 dframework을 의미 합니다.

아래

코드는 모듈을 만드는 방법 입니다. (일반적으로 고객사에서 모듈을 만들일은 없을 것 입니다.)

[코드 C-3]

(function(){ 'use strict'; var D = getDframework(); D.define('imgtech.media.Sample', function(){ function Sample(){ } return Sample; }); })();

D.define 함수를 통해 Class 이름과 Class를 리턴하는 콜백함수를 지정하여 모듈을 사용 할 수 있습니다. 이러한 모듈을 지정하고 모듈을 얻는 방식에서 dframework은 종속성을 체크하지 않습니다. 이 부분을 주의하여 사용 하시면 됩니다.

위 코드

에서 'use strict'은 오류 체크를 더 강하게 하여 찾기 어려운 버그를 미연에 방지하는 효과를 가집니다. 만약 'use strict'를 사용하여 exception이 자주 발생하고 그것이 불편하여 'use strict'을 제거한다면 이후 발생하는 비지니스로직 위의 에러는 찾지 못할 확률이 매우 높고 운이 좋으면 몇개월이 걸릴 수 있습니다.

[코드 C-3]

에서 코드가

( ... )( );

로 이루어져 있습니다. 앞의 괄호는 안의 함수를 정의하는 것이고 뒤의 괄호은 앞의 괄호를 실행하여 결과를 리턴 하라는 의미 입니다.
위와 같은 코드는 사용하려는 변수들을 함수내에 위치시켜 지역화(함수내부에만 영향을 미치는) 시키기 위한 것으로 만약 스크립트 태그에서

var a;

와 같이

var

라는 지시어를 사용해도 전역변수가 되고 심지어 window 객체의 변수를 망가뜨릴수 있어 불편하더라도 테스트 코드가 아닌 이상 피해야 하는 코딩 습관 입니다.

정리하면 우리는 모듈을 생성하거나 얻는 방법을 배웠습니다. 아래에서는 플러그인의 기능을 하는 모듈을 배우게 됩니다.

플러그인(모듈) 이해히기

플러그인

가정에서 사용하는 전기코드(플러그)와 같이 가정집의 전원장치에 플러그를 끼우면 그 장치의 고유기능이 동작하게 됩니다. 예를들어 청소기면 청소기가 기능하게 되고, TV면 가정집에 TV기능이 사용 됩니다. TV가 가정집에 있어도 플러그를 끼우지 않으면 동작하지 않습니다.

플레이어에서 플러그인 기능을 하는 모듈이라 함은 이러한 개념와 완전히 동일 합니다. 모듈을 플레이어에 끼우면 그 순간 모듈의 고유기능이 동작 합니다. 예를들어 그 모듈이 워터마크이면 워터마크가 동작하게 됩니다. 플레이어가 모듈을 가지고 있다해도 연결 시키는 행위를 하지 않으면 동작하지 않습니다.

플러그인은 모듈이기 때문에 Class(object 구성도)이면서 className(packageName)을 가집니다. 앞으로 플러그인을 모듈이라 부릅니다.

본 플레이어에는 많은 모듈이 존재하며 아래에 주요 모듈들을 나열 하였습니다. 아래에서 3번째의 '필요' 필드는 패키지명을 생략 할 수 있는지 여부로 빈공간은 className이 생략 가능하다는 의미 입니다. (버전3에서 필요 모듈로 변경된 모듈들이 존재합니다.

표시)

[표 C-3]

고유ID (이름)	Package Name	필요	설명
ui	imgtech.media.module.UI		다른 모듈에 속하지 않는 버튼들을 처리하는 모듈 입니다.
layout	imgtech.media.module.LayoutEx		전체적인 화면을 구성하는 모듈 입니다.
size	imgtech.media.module.Size		화면의 크기를 제어하는 모듈입니다. (풀스크린 역시 Size모듈에서 관리 합니다.)
progress	imgtech.media.module.Progress		재생바 영역을 제어하는 모듈 입니다. (뒤로,앞으로 재생위치를 변경하는 버튼 뿐만아니라 영싱길이, 현재재생위치 텍스트 역시 progress모듈이 관리 합니다.)
rate	imgtech.media.module.Rate	필요 *	배속을 제어/관리하는 모듈 입니다.
quality	imgtech.media.module.Quality	필요 *	화질을 제어/관리하는 모듈 입니다.
subtitle	imgtech.media.module.Subtitle	필요 *	자막을 제어/관리하는 모듈 입니다.
repeat	imgtech.media.module.Repeat	필요 *	구간반복을 제어/관리하는 모듈 입니다.
repmark	imgtech.media.module.Repmark	필요	구간반복 북마크를 제어/관리하는 모듈 입니다.
bookmark	imgtech.media.module.Bookmark	필요	책갈피 북마크를 제어/관리하는 모듈 입니다.
openLayer	imgtech.media.module.OpenLayer	필요	미니플레이어를 제어/관리하는 모듈 입니다.
thumbnail	imgtech.media.module.Thumbnail	필요	썸네일을 제어/관리하는 모듈 입니다.
volume	imgtech.media.module.Volume		볼륨을 제어/관리하는 모듈 입니다.
watchTime	imgtech.media.module.WatchTime	필요	학습시간을 제어/관리하는 모듈 입니다.
wide	imgtech.media.module.Wide	필요 *	Wide 모드를 제어/관리하는 모듈 입니다.
playlist	imgtech.media.module.Playlist		플레이리스트를 제어/관리하는 모듈 입니다.
switchSource	imgtech.media.module.SwitchSource		플레이어 선택을 제어/관리하는 모듈 입니다.
key	imgtech.media.module.Key	필요 *	단축키를 제어/관리하는 모듈 입니다.
continueTime	imgtech.media.module.ContinueTime		이어보기를 제어/관리하는 모듈 입니다.
config	imgtech.media.module.Config	필요	설정을 제어/관리하는 모듈 입니다.
app	imgtech.media.module.App	필요 *	외부의 앱(어플)을 제어/관리하는 모듈 입니다.
version	imgtech.media.module.Version		버전을 제어/관리하는 모듈 입니다.
ad	imgtech.media.module.AD	필요 *	광고를 재생하는 모듈 입니다.
vast	imgtech.media.module.VAST	필요 *	VAST 광고를 재생하는 모듈 입니다.
radio	imgtech.media.module.Radio		라디오 관련 설정 입니다.
recommend	imgtech.media.module.Recommend	필요 *	추천영상 관련 설정 입니다.

아래

에는 설정에서 모듈 영역만 표시 하였습니다.

[코드 C-4]

에서 설정 영역에 module이라는 속성에 모듈들이 나열 되어 있는 것을 확인 할 수 있습니다. module 속성에는

[표 C-3]

의 ID에 해당 하는 속성들이 나열 되어 있고 그 안에 설정하는 것이 각각의 모듈에 설정하는 것임을 알 수 있습니다.
특히 일부 모듈에는 className이 생략되어 있지 않고 표시 되어 있으므로 생략 할 수 없는 모듈이 있음을 이해 하시면 됩니다.

className이 생략되어 있는 것은 설정이 되어 있지 않아도 플레이어 내부에서 강제로 해당 모듈을 사용한다는 것을 의미하고 className이 들어 있는 것은 설정이 되어 있지 않다면 플레이어가 사용하지 않는다는 것을 의미 합니다.

className이 생략유무와 상관없이 다른 className을 지정한다면 지정된 className을 로드하여 모듈로 사용 합니다. 마찬가지로 완전히 새로운 ID를 만들고 className을 지정하면 새로운 ID에 대한 모듈이 로드 됩니다. 이는 곧

모듈 추가

방법입니다. 다만 위에서 지정된 ID들은 모듈들이 서로 영향을 미치는 경우가 있어 약속된 ID임을 이해 하셔야 합니다.

모듈 제거

모듈 제거는 className이 필요한 경우에는 className이 없으면 제거한것과 같은 효과 입니다. 그러나 모든 모듈들은 ID 속성에 false를 입력하면 해당 모듈은 플레이어가 강제 로딩도 하지 않습니다.

아래

는 일부 모듈을 제거하도록 설정한 예제 코드 입니다.

[코드 C-5]

var attr = { // 생략 module: { // 생략 continueTime: false, // 생략 wide: false, // 생략 }, // 생략 };

아래

는 플레이어 실행시 모듈을 제거 하도록 설정한 예제 코드 입니다.

[코드 C-6]

(function(){ window.createMediaPlayer('#mediaplayer', source, { module: { continueTime: false, wide: false } }); })();

모듈 객체

모듈 객체는 Class가 아니기 때문에 D.module 함수를 통해 객체를 가져 올 수 없습니다. 플레이어의 모듈 객체를 가져 오려면 플레이어를 통해 가져 와야 합니다.

아래

는 모듈 객체를 가져오는 방법을 소스 코드로 표시 한 것으로 layout모듈을 가져와 컨트롤 영역을 화면에 표시하는 함수를 호출한 예제 입니다.

[코드 C-7]

(function(){ var player = window.createMediaPlayer('#mediaplayer', source); var layoutMod = player.module('layout'); layoutMod.showControl(); var attr = layoutMod.attr; })();

[코드 C-7]

에서 player.module('layout'); 으로 layout 모듈을 가져 왔습니다. 마찬가지로 다른 모듈들도 모듈의 ID를 가지고 모듈 객체를 얻을 수 있습니다.

모듈 속성

아래에서 각각의 모듈의 속성에 대해서 배우게 됩니다. 여기서는 모듈의 속성을 API에서 접근하는 방법을 설명 합니다.

[코드 C-7]

에서 6라인을 보면 모듈객체의 attr 속성에 접근 한 코드가 나옵니다. 해당하는 attr이 layout 모듈의 설정입니다. 마찬가지로 모든 모듈 객체에는 attr 속성이 있고 여기에서 원하는 속성을 수정 할 수 있습니다.

이제 부터는 각각의 모듈들의 속성(설정하는 방법)을 배웁니다.

UI (ui) 모듈

아래

는 설정에서 ui 모듈 영역만 표시한 코드 입니다.

[코드 D-1]

toggleBtn

재생/일시정지를 토글하는 버튼으로 hideButton 속성이 있습니다.

stopBtn

재생을 정지하는 버튼으로 hideButton 속성이 있습니다.

titleText

제목을 표시하는 버튼(UI)로 hideExtendButton 속성이 있습니다.

소스 설정의 7. title 속성 참고

소스 설정의 title 속성에 제목을 입력하면 표시 되지만 hideExtendButton 속성이 true이면 title 속성 입력시에도 표시되지 않습니다. 또한 제목을 입력하지 않으면 hideExtendButton 속성이 false라 하여도 감춰집니다.

아래는 title과 관련된 예제 코드 입니다.

[코드 D-1-1]

아래 [플레이어 D-1-1]

은

[코드 D-1-1]

코드로 만들어진 플레이어이며, 코드의 소스 설정에서 입력된 title 정보가 표시되어 있습니다.

[플레이어 D-1-1]

[플레이어 D-1-2]

위

[플레이어 D-1-2]

의 소스코드는

아래

에 있으며 소스설정에 title 정보가 있으나, 화면에서는 제목이 표시되어 있지 않습니다. 이는 아래 코드와 같이 ui모듈의 titleText 속성의 hideExtendButton 속성이 true이기 때문입니다.

[코드 D-1-2]

hidePosterTime

포스터가 사라질 시간(초단위) 입니다. 아무런 값이 없다면 0.1초가 지나야 포스터가 사라집니다. (3.1.25)

레이아웃 (layout) 모듈

아래는 설정에서 layout 모듈 영역만 표시한 코드 입니다.

[코드 D-2]

controlAutoHide

컨트롤 영역이 보였다가 자동으로 감춰지게 되는 시간(초단위)을 지정 합니다. 이 값을 0으로 지정하게 되면 자동 감추기가 동작하지 않고 이는 풀스크린등에서도 마찬가지 이기 때문에 숫자를 지정하는 것이 좋고 아래의 다른 속성들을 통해 원하는 컨트롤이 되도록 합니다.

controlAutoHidePause

일시정지 상태에서 자동으로 감춰질 것인지 유무를 true or false로 설정 합니다. false이면 정지상태에서 감춰지지 않고, true이면 정지 상태라도 자동으로 감춰집니다.

[코드 D-1-2]

소스코드를 보면 14라인에 layout 모듈의 controlAutoHidePause가 true이고 그 플레이어가

[플레이어 D-1-2]

에 있습니다. 영상이 정지상태임에도 컨트롤이 자동으로 감춰지는 것을 확인 할 수 있습니다.

controlAutoHideFirst

controlAutoHideOver

마우스 over시 자동감추기의 동작 유무 입니다. true이면 동작, false이면 감춰지지 않습니다.

separateControlNormal

일반 화면(풀스크린이 아닌) 상태에서 컨트롤 영역과 영상 영역의 구분 유무인데 true이면 구분하고 false이면 구분하지 않습니다.

아래

[플레이어 D-2-1]

를 보면 영상 영역과 컨트롤 영역이 구분되어 있습니다. 영상 영역은 검정색인데 컨트롤 영역은 투명하여 그 밑의 색상이 보이기에 구분되어 있는 것을 확인 할 수 있습니다.
아래

[코드 D-2-1]

을 보면 layout 모듈 설정에 separateControlNormal이 true로 되어 있습니다. 문제는 이 경우에도 컨트롤은 자동 감춤이 이루어지는데 이를 막기 위해 alwaysControlNormal 속성을 true로 만들어 항상보이도록 설정 했습니다.

[플레이어 D-2-1]

[코드 D-2-1]

본 플레이어는 영상과 컨트롤을 구분하기 위해 별다른 작업 없이 userElement에 'mpv-separate-control' className을 삽입 합니다. 즉 실제 구분 작업은 css파일이 합니다.
아래는 mpv-separate-control 에 대한 catvod.css파일의 코드 입니다.

[코드 D-2-2]

separateControlFs

풀스크린 상태에서 컨트롤 영역과 영상 영역의 구분 유무인데 true이면 구분하고 false이면 구분하지 않습니다. 일반적으로 풀스크린상태에서는 구분하지 않기 때문에 false로 설정 합니다.

alwaysControlNormal

일반 화면 상태에서 컨트롤을 항상 보이게 하는 속성으로 true이면 항상 보입니다.

alwaysControlFs

풀스크린 상태에서 컨트롤을 항상 보이게 하는 속성으로 일반적으로 풀스크린에서는 자동 감추기가 동작해야 하므로 false로 설정 합니다.

controlHideMouseOut

true이면 마우스가 화면 밖으로 나가면 컨트롤이 즉시 사라지도록 합니다.

isShowControl

화면 클릭시(터치시) 컨트롤이 보이게 할 것인지 설정 합니다. 기본적으로 화면 터치는 재생과 일시정지를 토글하지만 컨트롤이 보이기를 원하는 경우가 있습니다. 그러한 경우 설정하는 것으로 이 속성은 함수로 되어 있습니다. 함수가 true를 리턴하는 경우 클릭(터치)시에 토글이 아닌 컨트롤을 보이게 합니다.
주로 모바일환경에서 터치시 컨트롤을 보이게 하는 것을 원하는데 그 설정이

function(){ return getDframework().b.isMobile || this.p.module('app').isMobileApp(); }

입니다.

isAnimationControl

컨트롤이 보여지고 감춰질 때 애니메이션 효과 사용 유무입니다.

disableToggleOSD

이값이 true인 경우 osdToggleBtn(mpv-osd-toggle)을 사용하지 않도록 합니다.

lockBtn

화면 잠금 버튼으로 hideExtendButton 속성이 있습니다.

화면 잠금은 본 플레이어에서 userElement에 단순히 mpv-lock-screen className을 삽입 합니다.
아래는 mpv-lock-screen에 대한 catvod.css의 코드 입니다.

[코드 D-2-3]

osdLoadingBtn

재생시작과 재생중 영상을 로딩할 때 표시하는 로딩중 아이콘에 대한 설정입니다.

disableToggle

화면을 클릭하면 재생/일시정지가 토글 됩니다. 이를 막기 위해 이 속성을 true로 설정 할 수 있습니다.

playMouseOver

마우스 오버시 재생되도록 하길 원하는 경우 이 속성을 true로 설정 합니다.

pauseMouseOut

마우스 오버후 나갈 때 일시정지 되기를 원하는 경우 이 속성을 true로 설정 합니다.

osdToggleBtn

재생과 일시정지 변환시 표시되는 아이콘에 대한 설정입니다.

touch

볼륨 및 재생바 위치 변경을 터치(모바일/태블릿 등에서)로 조절 할 수 있는 기능을 설정 합니다.

touch/

useType

언제 사용가능한지를 설정 합니다. (아래 표 참조)

useType	설명
always	항상 터치로 볼륨/재생위치변경을 할 수 있습니다.
fullscreen	풀스크린일 때에만 터치를 사용 할 수 있습니다.
none	터치를 사용하지 않습니다.

touch/

mobile/useType

모바일기기에서 언제 사용가능한지를 설정 합니다. (아래 표 참조)

useType	설명
always	모바일에서 항상 터치로 볼륨/재생위치변경을 할 수 있습니다.
fullscreen	모바일의 풀스크린일 때에만 터치를 사용 할 수 있습니다.
none	모바일에서 사용하지 않습니다.

touch/

message

터치로 볼륨/재생위치 변경시 화면에 변경되는 수치가 표시 됩니다. 이 때 이름을 지정 합니다. (아래 표 참조)

message	설명
S_PROGRESS	재생위치 변경시 나타나는 이름입니다. 디폴트는 '재생위치' 입니다.
S_VOLUME	볼륨 변경시 나타나는 이름입니다. 디폴트는 '볼륨'입니다.
S_BRIGHTNESS	밝기 변경시 나타나는 이름입니다. 디폴트는 '밝기'입니다.

clickTime

(3.1.41버전)
clickTime이 0이면 dblclick이벤트를 인정하고 touch이벤트를 사용하지 않습니다. clickTime은 0이거나 0보다 커야 합니다. 0보다 크면 dblclick을 사용하지 않고 click으로 더블클릭을 흉내내고 touch이벤트도 사용합니다. 이 값은 토글 기능과 sideDoubleTab과 관련되어 있습니다.

sideDoubleTab

(3.0.12버전)
더블탭 기능을 위한 설정 입니다. 더블탭은 양쪽 끝 부분을 더블탭하면 이전/이후 로 스킵하는 기능입니다. 가운데 더블탭은 기존과 같은 풀스크린 토글 입니다.

sideDoubleTab/

use

(3.0.12버전)
더블탭 기능 사용 유무로 true이면 사용, false이면 사용하지 않습니다.

sideDoubleTab/

useApple

(3.1.41버전)
이 설정은 더 이상 사용하지 않습니다.

sideDoubleTab/

useDoubleClickOnclickTime

(3.1.41버전)
clickTime이 0보다 큰 경우(touch이벤트를 허용한 경우) 더블클릭으로 sideDoubleTab을 사용하고 할 때 true입니다. 이값이 false인 경우 touch로만 sideDoubleTab을 사용 할 수 있습니다.

sideDoubleTab/

ignoreFullscreen

(3.0.12버전)
가운데 더블탭시 풀스크린 유무로 false이면 풀스크린 사용, true이면 풀스크린 사용하지 않습니다.

sideDoubleTab/

helperUnitText

(3.0.12버전)
더블탭시 이전/이후 seek되는 화면을 표시되고 몇초로 이동 되는지 표시 됩니다. 이 때 '초'의 이름입니다.

sideDoubleTab/

helperHideTimer

(3.0.12버전)
더블탭시 이전/이후 seek되는 화면을 표시되고 사라지는데 몇초뒤 사라질지를 설정 합니다. 기본은 1.0초 입니다.

sideDoubleTab/

progressHelperTimer

(3.0.12버전)
프로그래스바 클릭시 더블탭 설명 ui를 표시후 사라지는데 몇초 후 사라질지를 설정 합니다. 기본값은 2초 입니다.

사이즈 (size) 모듈

아래는 설정에서 size 모듈 영역만 표시한 코드 입니다.

[코드 D-3]

classList

// 사용하지 않습니다.

ignoreFullscreen

풀스크린 전환을 막기위한 속성으로 true, false 혹은 true/false를 리턴하는 함수를 지정 할 수 있습니다.

버전 2에서는 layout모듈에도 이와 동일한 속성이 있었으나 layout모듈의 ignoreFullscreen 속성은 버전3에서 제거 되었습니다.

fullscreenBtn

풀스크린과 일반화면 토글 버튼 입니다.

sizeBtn

사이즈 변경 버튼으로 당분간 사용하지 않습니다.

fullscreenNavigationUI

(3.1.39버전)
모바일에서 풀스크린 진입시 하단 네비게이션 바를 숨기기 원하는 경우 설정 할 수 있습니다.

이 속성은 버전 3.1.39부터 지원 합니다.
안드로이드만 지원 합니다.

fullscreenLandscape

(3.1.39버전)
풀스크린 진입시 가로모드 고정을 원하는 경우 true를 설정 합니다.

이 속성은 버전 3.1.39부터 지원 합니다.
iOS는 지원하지 않습니다.

fullscreenAllowFullscreen

iframe안에 플레이어가 존재 할 때 상위 iframe이 풀스크린을 허용해야 합니다. 이 설정을 플레이어 자동으로 설정 하도록 합니다.

이 속성은 버전 3부터 지원 합니다.
cross도메인 문제가 없어야 합니다.

fullscreenResizeWindow

IE10이하에서 동작하는 속성으로 IE10이하는 풀스크린을 지원하지 않아 플레이어가 브라우저의 크기 만큼 변화여 풀스크린처럼 보이도록 하는데, 이 때 브라우저의 크기를 모니터의 크기만큼 크게 만드는 것을 허용할지를 정하는 속성 입니다.

브라우저 내부에 탭이 여러개이면 동작하지 않습니다.

fullscreenReplaceCss

풀스크린을 지원하지 않는 IE10이하와 iOS에서 동작하는 옵션으로 css 클래스이름을 강제로 변경하고 복원 하도록 합니다.

fullscreenReplaceZindex

풀스크린을 지원하지 않는 IE10이하와 iOS에서 동작하는 옵션으로 z-index 값을 강제로 변경하고 복원 하도록 합니다.

버전2에서 이 속성은 fullscreenReplaceFixedCss이였으나 변경하였습니다.

fullscreenHideElement

풀스크린을 지원하지 않는 IE10이하와 iOS에서 동작하는 옵션으로 display: none을 강제로 변경하고 복원 하도록 합니다.

fullscreenReplaceIframe

풀스크린을 지원하지 않는 IE10이하와 iOS에서 동작하는 옵션으로 iframe을 강제로 변경하고 복원 하도록 합니다.

이 속성은 버전 3부터 지원 합니다.

fullscreenReplaceElement

(3.0.14버전)
2.x버전에서 지원했던 기능이였으나 이 기능이 flash 플레이어 사용시 문제가 있어 제거 하였으나, 그럼에도 불구하고 다시 추가 하였습니다. 이 옵션은 최대한 사용을 자제하고 어쩔 수 없는 경우 사용하시길 권장 합니다.
이 설정은 플레이어를 body태그 최상위로 옮기고 body태그에 있던 element에 mpv-fullscreen-none className을 넣어 html, css에 영향을 받지 않도록 합니다. flash에서는 영상에 오류가 생길 수 있습니다.

프로그래스 (progress) 모듈

아래는 설정에서 progress 모듈 영역만 표시한 코드 입니다.

[코드 D-4]

skipInputValue

뒤로/앞으로 시크 시 이동 할 시간(초단위) 입니다.

skipInputIgnoreMobile

모바일에서 skip input tag를 숨길지 유무 입니다.

previousSkipBtn

뒤로 스킵 버튼 입니다.

nextSkipBtn

앞으로 스킵 버튼 입니다.

skipInput

뒤로/앞으로 스킵 시 이동할 시간을 입력하는 인풋박스 입니다.

currentTimeText

현재 재생시간을 표시하는 엘리먼트 입니다.

durationText

영상 총 재생시간을 표시하는 엘리먼트 입니다.

preview

소스설정의 preview

와 함께 사용되는 설정으로 미리보기 기능입니다.

preview/alwaysRequest

preview보기가 끝나면 preview/callback 함수를 호출 합니다. 이 호출은 한번만 호출되는데 (즉, 처음으로 이동후 다시 preview가 끝나는 시점에 호출하지 않음) 이 옵션을 true로 설정하면 항상 콜백을 호출 합니다. (3.0.10버전)

preview/gotoFirst

preview보기가 끝나면 시작시점으로 이동할지를 묻는 설정으로 true이면 시작시점으로 이동 합니다. (3.0.10버전)

preview/callback

소스설정의 preview 설정에 따라 미리보기가 진행되고 미리보기가 완료되면 여기에 지정된 callbback함수를 호출 하게 됩니다.

아래

에 preview를 적용한 샘플 플레이어가 있습니다.

[플레이어 D-4-1]

아래

는

[플레이어 D-4-1]

에 대한 소스코드 입니다.

[코드 D-4-1]

소스설정의 preview 속성을 통해 미리보기 할 구간을 정하고 미리보기가 완료되면 progress모듈의 preview 설정 callback 함수를 호출하게 됩니다. 콜백함수에서 영상의 구매등의 과정을 거쳐 전체 영상을 볼 수 있게 되면 thiz.unsetPreview(true)를 호출 하여 기존 preview 설정을 제거 하고 전체를 재생 하게 됩니다.
미리보기가 진행되는 동안 사용자 지정 엘리먼트에 mpv-preview-screen className이 지정됩니다.

배속 (rate) 모듈

아래는 설정에서 rate 모듈 영역만 표시한 코드 입니다.

[코드 D-5]

use

배속 모듈의 동작 유무로 true이면 동작, false이면 동작하지 않습니다.

useType

배속 버튼의 표시 방법으로 list와 button 방식이 있습니다.

useType	설명
list	배속버튼 하나만 존재하고 클릭시 배속 목록(메뉴)가 나타나 배속을 선택 할 수 있습니다.
button	배속 감속,가속 버튼을 통해 배속을 변경 시키는 방식 입니다.

rateBtn

배속 버튼으로 배속을 선택 할 수 있는 목록(메뉴)가 나타납니다. (useType이 list에서 동작)

rateDownBtn

배속을 감소 시키는 버튼 입니다. (useType이 button에서 동작)

rateUpBtn

배속을 증가 시키는 버튼 입니다. (useType이 button에서 동작)

rateText

현재 배속 정보가 표시되는 텍스트 입니다.

rateInfo

사용하고자 하는 배속 목록 입니다. 각각의 원소의 value는 실제값, cvalue가 화면에 표시되는 이름 입니다.

화질 (quality) 모듈

아래

는 설정에서 quality 모듈 영역만 표시한 코드 입니다.

[코드 D-6]

화질은 일반적으로 고화질, 일반화질, 저화질과 같이 나뉘어지고 각각의 화질에 대한 파일이 별도로 준비 되어 있어야하며, 각각의 화질 정보에 대한 설정이 필요 합니다. 이러한 설정은 소스 설정에 위치 합니다.

아래

에 화질 정보를 가지는 소스 설정에 대한 코드가 있습니다.

[코드 D-6-1]

위

[코드 D-6-1]

의 소스 설정을 보면 quality에 code, label, src로 이루어진 원소들의 배열이 있습니다. 각각의 원소에서 src는 code 혹은 label에 해당하는 화질의 영상이 있는 주소이며, label은 화면에 표시되는 이름이고, code는 화질을 구분하는 값 입니다. select는 최초선택될 화질 입니다.
이전 소스 설정에서는 위 quality와 같은 깊이에 있던 src라는 속성에 주소를 입력하였지만 화질을 가지는 소스에서는 src 속성이 무시되고 화질 목록의 각 원소의 src 값을 사용하게 됩니다.

참고로 소스 설정에서 배운 virtualTime 기능이 화질 모듈을 사용했을 때에도 정상적으로 동작한다는 것을

아래

에서 확인 할 수 있으며 다른 모든 모듈들과 마찬가지로 현재 소스가 virtualTime 모드로 동작하는지 알지못하며 심지어 나중에 배울 이벤트와 API에서 조차 인식하지 않습니다.

아래

에 위

[코드 D-6-1]

에 의해 생성된 플레이어가 있으며, 화질을 선택하기 위한 버튼이 자동으로 생겼습니다.

[플레이어 D-6-1]

className

화질은 버전3에서 className을 생략 할 수 없도록 변경되었습니다. 기본값은 'imgtech.media.module.Quality' 입니다.

use

화질 모듈 동작 유무로 true, false가 있습니다.

qualityBtn

화질 버튼으로 클릭시 화질 선택 목록(메뉴)가 나타납니다.

만약 이 버튼을 hideButton 속성으로 감춘다면 화질 목록이 있어도

[플레이어 D-6-1]

의 하단 화질 선택 버튼은 사라집니다.

자막 (subtitle) 모듈

아래

는 설정에서 subtitle 모듈 영역만 표시한 코드 입니다.

[코드 D-7]

자막은 일반적으로 한국어, 영어와 같이 나뉘어지고 각각의 자막에 대한 파일이 별도로 준비 되어 있어야하며, 각각의 자막 정보에 대한 설정이 필요 합니다. 이러한 설정은 소스 설정에 위치 합니다.

아래

에 자막 정보를 가지는 소스 설정에 대한 코드가 있습니다.

[코드 D-7-1]

위

[코드 D-7-1]

의 소스 설정을 보면 subtitle에 code, label, src로 이루어진 원소들의 배열이 있습니다. 각각의 원소에서 src는 code 혹은 label에 해당하는 자막의 주소이며, label은 화면에 표시되는 이름이고, code는 자막을 구분하는 값 입니다. select는 최초 선택될 자막 입니다.

아래

에 위

[코드 D-7-1]

에 의해 생성된 플레이어가 있으며, 자막을 선택하기 위한 버튼이 자동으로 생겼습니다.

[플레이어 D-7-1]

className

자막은 버전3에서 className을 생략 할 수 없도록 변경되었습니다. 기본값은 'imgtech.media.module.Subtitle' 입니다.

use

자막 모듈 동작 유무로 true, false가 있습니다.

onlyText

자막안에는 style값이 포함된 경우가 있습니다. 그러한 경우 style을 사용하지 않고 텍스트만을 사용하고자하는 설정으로 true, false가 있습니다.

toggle

자막 버튼을 클릭하면 자막 목록이 나타납니다. 그러나 자막이 한글 혹은 무자막 중 하나만 선택한다던가 혹은 작은 수의 자막으로 클릭시 토글처럼 동작하기를 원하는 경우 자막 모듈 설정의 toggle 속성을 true로 설정 할 수 있습니다.

아래

에 toggle 속성을 true로 한 샘플 플레이어가 있습니다.

[플레이어 D-7-2]

subtitleBtn

자막 버튼 선택시 자막 목록(메뉴)이 표시 됩니다.

만약 이 버튼을 hideButton 속성으로 감춘다면 자막 목록이 있어도 [플레이어 D-7-1]의 하단 자막 선택 버튼은 사라집니다.

구간반복 (repeat) 모듈

아래는 설정에서 repeat 모듈 영역만 표시한 코드 입니다.

[코드 D-9]

className

구간반복 모듈은 버전3에서 className을 생략 할 수 없도록 변경되었습니다. 기본값은 'imgtech.media.module.Repeat' 입니다.

repeatBtn

구간반복 아이콘을 화면에 표시하고 구간반복을 시작시키는 버튼입니다.

type

구간반복 버튼 클릭시 구간반복 시작점과 끝점이 한번에 나타나는 방식인 경우와 한번 클릭시 현재 재생 위치에 시작점을 표시 하고 한번 더 클릭하면 그 때의 재생위치에 끝점을 표시하는 방식이 있습니다. 후자의 경우 2를 입력하여 시작점과 끝점을 다른 시간에 표시 할 수 있습니다. 기본은 한번에 시작과 끝점이 표시되는 0 입니다. (이 때 시작점은 현재 재생 위치이고 끝점은 영상의 끝 위치 입니다.)

alwaysCurrentTime

구간반복 버튼을 클릭하여 구간반복 시작점을 표시 하게 될 때 현재 재생위치에 있게 하기 위한 설정으로 true와 false가 있습니다. 기본값은 true 입니다.

progressUi

isRepeat

구간 반복 끝점까지 재생이 되면 구간 반복 시작점으로 이동 합니다. 이 때 자동재생 유무를 true 혹은 false로 설정 합니다.

isLogin

구간반복 북마크 (repmark) 모듈

구간반복 북마크는 repeat(구간반복) 모듈과 함께 사용되는 모듈로서 반복하고자 하는 시작점과 끝점의 정보를 목록으로 가지고 있다가 사용자의 선택에 의해 구간반복 모듈을 통해 해당하는 시작점과 끝점을 반복하는 모듈 입니다.

아래

는 설정에서 repmark 모듈 영역만 표시한 코드 입니다.

[코드 D-10]

소스 설정

보통 시청자가 구간반복을 하고자 하는 시점/끝점의 목록을 가지고 있다면 그 정보를 소스 입력시 알아야 합니다. 결국 소스 설정에 기존의 구간반복 시작/끝점의 목록을 설정해야 합니다.

[표 D-10-1]

구간반복 목록 원소의 속성 정보

속성	설명
start	시작점으로 초단위로 입력 합니다.
end	끝점으로 초단위로 입력 합니다.
name	구간반복에 대한 이름을 입력 합니다. (생략가능합니다.)

소스에 repmark 설정이 없어도 repmark모듈은 동작 합니다.

아래

에 코드가 있고 9라인부터 14라인에 저장된 북마크 목록 설정 샘플이며, 19라인에 북마크 목록 버튼이 감춰지지 않도록 설정했습니다.

[코드 D-10-1]

구간반복 북마크 목록 화면

아래

는

[코드 D-10-1]

으로 생성된 플레이어이며 하단 컨트롤 오른쪽에 구간반복 북마크 목록을 볼 수 있는 버튼이 생겼고 그 버튼을 클릭하면 아래와 같이 북마크 목록이 나타납니다.

[플레이어 D-10-1]

구간반복 북마크 목록 버튼을 클릭하면 목록이 나타나며 그 구성은 아래와 같습니다.

[표 D-10-2]

구간반복 목록의 구성

버튼	설명
추가버튼	구간반복을 추가 할 수 있는 버튼으로 클릭시 추가하는 화면이 나타납니다.
닫기버튼	목록을 닫을 수 있는 버튼 입니다.
삭제버튼	구간반복 정보를 삭제하는 버튼 입니다.

구간반복 북마크 입력 화면

아래는 북마크 목록에서 추가 버튼을 클릭한 경우 나타나는 북마크 입력 화면 입니다.

[플레이어 D-10-2]

구간반복 북마크 설정

아래는 repmark (구간반복 북마크) 모듈 설정의 속성 입니다.

className

구간반복 북마크 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Repmark' 입니다.

addBtn

구간반복 북마크에 북마크를 추가하는 버튼 입니다.

menuBtn

구간반복 북마크 목록(메뉴)를 표시하는 버튼 입니다.

useName

구간반복 북마크에 이름 사용 유무 입니다. 북마크 저장시 이름을 지정 할 수 있습니다.

useName

구간반복 북마크에 이름 사용 유무 입니다. 북마크 저장시 이름을 지정 할 수 있습니다.

closeOnClick

기본적으로 북마크 목록 이외의 영역을 클릭하면 북마크 목록 창이 자동으로 닫힙니다. 이 기능을 끄고 싶다면 이 속성을 false로 설정합니다.

[플레이어 D-10-2]

에서 목록 버튼을 클릭 한 후 다른 곳을 클릭하면 자동으로 닫히는 것을 확인 할 수 있으며,

[플레이어 D-10-1]

에서는 closeOnClick 속성이 false로 되어 있어 닫히지 않는 것을 볼 수 있습니다. false로 설정된 소스 코드를

[코드 D-10-1]

의 19라인 에서 확인 가능 합니다.

size

북마크 최대 갯수 입니다. 0 이면 무제한 입니다.

add

북마크 추가시 호출되는 콜백함수로 data 파라미터가 전달 됩니다. data에는 name, start, end 등의 속성이 전달 됩니다.

remove

북마크 삭제시 호출되는 콜백함수로 data 파라미터가 전달 됩니다. data에는 name, start, end 등의 속성이 전달 됩니다.

message

메세지 속성은 추후 추가 설명을 합니다. alertAutoHide 속성은 경고창 표시 후 자동으로 경고창을 닫을지를 묻는 것으로 0이 아니면 자동으로 닫히는 시간(초단위) 입니다.

input

input 속성은 북마크 입력 화면에 대한 설정으로 아래는 input 속성의 추가 속성들의 설명입니다.

input/

nameLength

북마크 이름의 최대 길이 입니다.

input/

timeLength

북마크 시간의 최대 길이 입니다. 북마크 시간의 입력(표시) 형식은 000:00:00 와 같습니다.

input/

hideAfterAppend

북마크 추가 후 입력 박스를 닫을지 유무 입니다. true, false 입니다.

input/

showAfterAppend

북마크 추가 후 목록(메뉴)를 표시 할지 유무 입니다. true, false 입니다.

input/

linkControlBtn

북마크 목록창이 열려 있는 상태에서 컨트롤 영역의 북마크 추가 버튼(북마크 목록의 추가 버튼이 아닙니다)을 클릭하면 북마크 입력창이 나타납니다. 이 때 입력창이 닫히면 북마크 목록창으로 돌아가는 것을 허용 할지 묻는 것으로 true이면 북마크 목록창으로 가고, false이면 북마크 입력창만 닫히고 북마크 목록창은 나타나지 않습니다.

input/

closeOnClick

기본적으로 북마크 입력창 이외의 영역을 클릭하면 창이 자동으로 닫힙니다. 이 기능을 끄고 싶다면 이 속성을 false로 설정합니다.

책갈피 북마크 (bookmark) 모듈

아래는 설정에서 bookmark 모듈 영역만 표시한 코드 입니다.

[코드 D-11]

소스 설정

보통 시청자가 책갈피(북마크) 목록을 가지고 있다면 그 정보를 소스 입력시 알아야 합니다. 결국 소스 설정에 기존의 책갈피 목록을 설정해야 합니다.

[표 D-11-1]

책갈피 목록 원소의 속성 정보

속성	설명
seconds	책갈피 위치의 시간으로 초단위 입니다.
name	책갈피에 대한 이름을 입력 합니다. (생략가능합니다.)

소스에 bookmark 설정이 없어도 bookmark모듈은 동작 합니다.

아래

에 코드가 있고 9라인부터 14라인에 저장된 책갈피 목록 설정 샘플이며, 19라인에 목록 버튼이 감춰지지 않도록 설정했습니다.

[코드 D-11-1]

책갈피 북마크 목록 화면

아래

는

[코드 D-11-1]

으로 생성된 플레이어이며 하단 컨트롤 오른쪽에 책갈피 북마크 목록을 볼 수 있는 버튼이 생겼고 그 버튼을 클릭하면 아래와 같이 책갈피 목록이 나타납니다. 또한 추가적으로 프로그래스바영역에 책갈피가 지정된 위치에 특별한 박스(점)가 생긴 것을 볼 수 있습니다.

[플레이어 D-11-1]

책갈피 북마크 목록 버튼을 클릭하면 목록이 나타나며 그 구성은 아래와 같습니다.

[표 D-11-2]

책갈피 목록의 구성

버튼	설명
추가버튼	책갈피를 추가 할 수 있는 버튼으로 클릭시 추가하는 화면이 나타납니다.
닫기버튼	목록을 닫을 수 있는 버튼 입니다.
삭제버튼	책갈피 정보를 삭제하는 버튼 입니다.

책갈피 북마크 입력 화면

아래는 책갈피 목록에서 추가 버튼을 클릭한 경우 나타나는 책갈피 입력 화면 입니다.

[플레이어 D-11-2]

책갈피 북마크 설정

아래는 bookmark (책갈피 북마크) 모듈 설정의 속성 입니다.

className

책갈피 북마크 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Bookmark' 입니다.

addBtn

책갈피 북마크에 북마크를 추가하는 버튼 입니다.

menuBtn

책갈피 북마크 목록(메뉴)를 표시하는 버튼 입니다.

useName

책갈피 북마크에 이름 사용 유무 입니다. 북마크 저장시 이름을 지정 할 수 있습니다.

closeOnClick

기본적으로 북마크 목록 이외의 영역을 클릭하면 북마크 목록 창이 자동으로 닫힙니다. 이 기능을 끄고 싶다면 이 속성을 false로 설정합니다.

[플레이어 D-11-2]

에서 목록 버튼을 클릭 한 후 다른 곳을 클릭하면 자동으로 닫히는 것을 확인 할 수 있으며,

[플레이어 D-11-1]

에서는 closeOnClick 속성이 false로 되어 있어 닫히지 않는 것을 볼 수 있습니다. false로 설정된 소스 코드를

[코드 D-11-1]

의 19라인 에서 확인 가능 합니다.

size

북마크 최대 갯수 입니다.

unitName

북마크 갯수의 단위 이름을 입력 합니다. 보통 설정 목록에서 북마크 갯수가 표시되는데 이 경우 사용하게 됩니다.

playOnClick

(3.0.20)
북마크 선택시 영상을 재생 시킵니다.

add

북마크 추가시 호출되는 콜백함수로 data 파라미터가 전달 됩니다. data에는 name, seconds 등의 속성이 전달 됩니다.

remove

북마크 삭제시 호출되는 콜백함수로 data 파라미터가 전달 됩니다. data에는 name, seconds 등의 속성이 전달 됩니다.

message

input

input 속성은 북마크 입력 화면에 대한 설정으로 아래는 input 속성의 추가 속성들의 설명입니다.

input/

nameLength

북마크 이름의 최대 길이 입니다.

input/

timeLength

북마크 시간의 최대 길이 입니다. 북마크 시간의 입력(표시) 형식은 000:00:00 와 같습니다.

input/

hideAfterAppend

북마크 추가 후 입력 박스를 닫을지 유무 입니다. true, false 입니다.

input/

showAfterAppend

북마크 추가 후 목록(메뉴)를 표시 할지 유무 입니다. true, false 입니다.

input/

linkControlBtn

북마크 목록창이 열려 있는 상태에서 컨트롤 영역의 북마크 추가 버튼을 클릭하면 북마크 입력창이 나타납니다. 이 때 입력창이 닫히면 북마크 목록창으로 돌아가는 것을 허용 할지 묻는 것으로 true이면 북마크 목록창으로 가고, false이면 북마크 입력창만 닫히고 북마크 목록창은 나타나지 않습니다.

input/

closeOnClick

기본적으로 북마크 입력창 이외의 영역을 클릭하면 창이 자동으로 닫힙니다. 이 기능을 끄고 싶다면 이 속성을 false로 설정합니다.

input/

pauseOnOpen

(3.0.20)
이 값이 true이면 입력창이 뜰 때 영상 재생이 일시중지 되도록 합니다.

input/

ignoreTime

(3.0.20)
이 값이 true이면 북마크 등록시 북마크 시간을 체크 하지 않습니다. 단 전체 재생시간 보다 크면 등록 실패 메세지가 뜹니다. (M0005)
이 값이 false이면 북마크 등록시 북마크 시간이 처음 2초 이상 영상 끝 2초 이내 범위에 존재해야 하며 그렇지 않으면 등록 실패 메세지가 뜹니다. (M0005)

미니플레이어 (openLayer) 모듈

아래는 설정에서 openLayer 모듈 영역만 표시한 코드 입니다.

[코드 D-12]

className

미니플레이어 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.OpenLayer' 입니다.

use

모듈의 동작 유무로 true, false가 있습니다.

width

미니플레이어의 가로 크기 입니다. '%'와 같은 문자열과 함께 쓰일 경우 문자열로 표현해야 하며, 그외는 숫자이어야 'px'가 붙습니다.

height

미니플레이어의 세로 크기 입니다. 이 값이 'auto'로 설정된 경우 영상의 크기에 맞게 변경됩니다.

mobile

모바일 환경에서 동작하는 설정입니다.

mobile/width

모바일에서의 가로 크기 입니다. '%'와 같은 문자열과 함께 쓰일 경우 문자열로 표현해야 하며, 그외는 숫자이어야 'px'가 붙습니다.

mobile/height

모바일에서의 세로 크기 입니다. auto인 경우 영상의 크기에 맞게 height가 커집니다.

mobile/landscape

모바일이 가로모드인 경우 동작 방식을 지정 합니다.

mobile/landscape	설명
auto
none
fullscreen

mobile/type

모바일에서 미니플레이어가 어디에 표시 될지를 지정 합니다. 현재는 top 만 지원 됩니다.

hideOnClose

미니플레이어가 닫힌 후 다시 미니플레이어 상태로 갈 수 있는지를 설정 합니다. true와 false가 있고 true인 경우 창을 새로고침 하기전에는 미니플레이어 상태로 가지 않습니다.

openLayerBtn

미니플레이어 버튼으로 미니플레이어 상태로 만듭니다.

rollbackBtn

미니플레이어 상태에서 일반 화면으로 돌아가는 버튼 입니다.

closeBtn

미니플레이어를 닫는 버튼 입니다.

썸네일 (thumbnail) 모듈

아래는 설정에서 thumbnail 모듈 영역만 표시한 코드 입니다.

[코드 D-13]

className

썸네일 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Thumbnail' 입니다.

use

쎔네일 모듈의 동작유무를 설정 합니다. true와 false가 있습니다.

auto

보통 썸네일은 이미지를 서버에서 가지고 옵니다. 이러한 절차 없이 영상에서 썸네일을 자동으로 표시 할 수 있습니다. 썸네일 자동 기능은 IE에서는 사용 할 수 없고 서버에서 이미지를 별도로 가져와야 합니다.

is_always_hide_onerror

에러 발생시 더 이상 썸네일을 표시하지 않습니다. false인 경우 에러가 발생해도 다시 표시하려 시도 합니다.

width

썸네일의 가로 크기 입니다.

height

썸네일의 세로 크기 입니다.

callback

썸네일 이미지를 얻기 위한 콜백 함수로 시간과 콜백함수를 파라미터로 주고 고객사에서는 시간파라미터로 이미지를 콜백함수를 통해 전달 합니다.

볼륨 (volume) 모듈

아래는 설정에서 volume 모듈 영역만 표시한 코드 입니다.

[코드 D-14]

type

type에는 아래와 같은 type이 존재하고 각각은 mpv-volume-layout 엘리먼트에 지정된 className이 붙게 됩니다.

type	className	설명
vertical	mpv-up-vertical	볼륨 조절바가 세로로 나타나게 합니다.
horizontal	mpv-horizontal	볼륨 조절바가 가로로 나타나게 합니다.

아래

는 type과 관련된 catvod.css의 볼륨 관련 코드를 표시 하였습니다.

[코드 D-14-2]

disable

PC에서는 기본으로 사용되나 iOS에서는 볼륨 조절기능을 iOS기기의 볼륨 버튼을 통해서만 조절 할 수 있습니다. 그렇기 때문에 iOS에서 볼륨UI를 제거 하기 위한 옵션인데 android에도 동일하게 적용하기 원하는 경우 android를 disable 배열 속성에 추가 할 수 있습니다.

disableVolume

모바일에서 볼륨 버튼에 볼륨 조절 기능을 없애고 단순히 mute, unmute 기능만을 사용하고자 하는 경우 설정 합니다. 이러한 경우 disableVolume 속성에 배열로 iOS와 android를 설정 할 수 있습니다.

disableMouseOver

볼륨에 마우스를 올리면 볼륨조절바가 자동으로 나타나도록 하는 속성으로 기본은 disable을 의미하는 true 입니다.

아래

는 볼륨을 가로 모드가 되게 하고 마우스를 올리면 볼륨 조절바가 나타나게 한 플레이어 입니다.

[플레이어 D-14-1]

아래

는

[플레이어 D-14-1]

의 소스 코드 입니다.

[코드 D-14-1]

hideTimer

볼륨 프로그래스바가 표시된 후 사라질 시간으로 초단위 입니다. 기본값은 1.0초 입니다.

autoHide

이 속성은 가로모드에서 볼륨 프로그래스바가 표시된 후 자동으로 사라지는 기능을 사용 할지를 지정 합니다. true이면 가로모드일 때 볼륨 프로그래스바가 자동으로 사라집니다.

isAnimationControl

볼륨이 보여지고 감춰질 때 애니메이션 허용 유무 입니다.

학습시간 (watchTime) 모듈

아래

는 설정에서 watchTime 모듈 영역만 표시한 코드 입니다.

[코드 D-15]

className

학습시간 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.WatchTime' 입니다.

use

학습시간 모듈의 동작 유무를 설정 할 수 있습니다. true와 false가 있습니다.

debug

학습시간 모듈과 관련된 로그를 출력하기 위한 설정으로 true,false를 지정 할 수 있습니다.

alwaysEvent

정지상태인 경우에도 학습시간 이벤트를 발생시키도록 허용하는 속성 입니다.

depthSeconds

학습시간 이벤트를 발생시킬 간격을 초단위로 설정 합니다.

beforeunload

플레이어 페이지를 벗어나려 할 때 이벤트를 발생 시키기 위한 속성입니다.

sourceTime

이벤트 발생시 받을 데이타중 하나로 소스가 입력되고 나서 현재까지의 시간(초단위) 정보를 제공 합니다.

pureTime

이벤트 발생시 받을 데이타중 하나로 영상이 재생되고 부터 종료 까지의 시간(일시정지 포함)을 제공 합니다. 영상이 종료 상태가 아니면 재생시작부터 현재까지 시간을 제공 합니다.

overlapPlayTime

이벤트 발생시 받을 데이타중 하나로 영상이 재생된 구간의 학습 시간을 제공 합니다. 즉 정지, 일시정지, 영상재생완료, 버퍼링 구간등을 제외한 학습시간을 제공 합니다. 이 때 반복 재생 구간을 포함(overlap)하여 계산 합니다.

playTime

overlapPlayTime와 같으나 반복 재생 구간을 제외 합니다. 그렇기 때문에 range의 값을 추가로 제공 합니다.

playTime 추가 제공 정보	설명
range	고객사에서 사용할 range 목록 입니다. range의 각 원소는 {start: 10.202, end: 100.101} 와 같은 형식 입니다.
rangeString	고객사에서 사용 할 range 목록을 문자열 형태로 제공 합니다. "[{\"start\":1687.038,\"end\":1691.785}]"
originRange	위의 range목록은 일부 변경된 목록으로 저장 하기 위한 값이며 originRange는 실제 목록 입니다.

playTime/

useRange

콜백함수로 받을 데이타에 range 정보를 추가해서 받습니다.

playTime/

useRangeSort

콜백함수로 받을 데이타에 range 정보를 소트해서 받습니다. (useRange가 설정되어 있어야 합니다.)

playTime/

useTestRange

playTime/

replaceRange

callback

지정된 시간 마다 지정된 callback속성의 함수를 호출 합니다.

아래

는 학습시간 모듈이 적용된 플레이어 입니다. 개발자 도구를 열어 콜백함수가 작성하는 로그를 확인 하세요.

[플레이어 D-15-1]

아래

는

[플레이어 D-15-1]

의 소스 코드 입니다.

[코드 D-15-1]

콘솔 로그를 보면 아래와 같이 출력 될 것 입니다.

> watchTime:
> {
overlapPlayTime: {
current: {vod: 0, real: 0},
old: {vod: 0, real: 0},
value: {vod: 0, real: 0},
previous: {vod: 0, real: 0},
depth: {vod: 0, real: 0}
}, playTime: {
current: {vod: 0, real: 0},
old: {vod: 0, real: 0},
value: {vod: 0, real: 0},
previous: {vod: 0, real: 0},
depth: {vod: 0, real: 0}
range: [ {start: 0, end: 0} ]
originRange: [ {start: 0, end: 0} ]
rangeString: "[ {start: 0, end: 0} ]"
}
}

playTime에는 overlapPlayTime가 같으나 추가적으로 range, originRange, rangeString과 같은 추가 정보가 함께 전달 되는 것을 확인 할 수 있습니다. 또한 보통 value값이 사용하시면 되는데, vod는 영상의 시간을 기준으로 한 것이고 real은 실세계의 시간을 기준 한 것 입니다.

vod/real	설명
vod	영상의 시간을 기준으로 제공하는 값으로 1시간영상을 2배속으로 보았어도 1시간으로 제공됩니다.
real	실세계의 시간을 기준으로 1시간 영상을 2배속으로 보았다면 실세계에서 30분 걸렸을 것입니다. 그 30분의 값을 제공 합니다.

아래는 current, old, value, previous, depth에 대한 표 입니다.

구분	설명
current	데이타 생성 시점의 학습 시간(초단위) 입니다.
old	플레이어를 다시 열었을 때 이전의 학습 시간 값을 의미 합니다.
value	이전 학습 시간과 현재 학습시간의 합을 의미 합니다.
previous	페이지를 연 후 최근 저정된 값을 의미 합니다. (즉 이전에 제공해 드린 value값입니다.)
depth	지금 제공해 드린 value와 이전값(previous)의 차이값을 의미 합니다.

워터마크 (watermark) 모듈

아래는 설정에서 watermark 모듈 영역만 표시한 코드 입니다.

[코드 D-16]

className

워터마크 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Watermark' 입니다.

use

워터마크 모듈의 동작 유무를 설정 할 수 있습니다. true와 false가 있습니다.

ignorePause

워터마크가 나타나는 9개의 공간의 위치를 변경 할 때 정지상태에서는 작동을 멈추게 하는 속성 입니다.

intervalTime

워터마크가 나타나는 9개의 공간의 위치를 변경 시킬 때 사용하는 timer (1/1000초단위) 입니다.

alpha

워터마크 글씨의 알파값 입니다. (0~1 사이의 값)

color

워터마크 글씨의 색상값으로 color style 값 입니다.

font

워터마크 글씨의 font style 값 입니다.

position

워터마크가 표시 될 위치와 그 위치의 표시와 비표시 사이의 간격 시간(초단위)을 지정 합니다.

random

position에서 지정한 위치를 순서대로 표시 할지 random하게 표시 할지를 설정 합니다. true인 경우 position에서 지정 한 순서가 아닌 랜덤하게 표시 합니다.

rotate

워터마크를 회전 시킵니다. 속성값은 (0~360) 입니다.

multi

position에서 지정한 9개의 위치에서 한번에 몇개를 표시 할지를 설정 합니다. 최소 1개에서 9개를 지정 할 수 있으며 9개의 경우 시간 마다 위치를 변경시키는 의미가 사라지게 됩니다.

lineHeight

워터마크가 2줄 이상인 경우의 lineHeight로 style의 lineHeight 입니다.

message

워터마크 글자를 입력 합니다.

와이드 (wide) 모듈

아래는 설정에서 wide 모듈 영역만 표시한 코드 입니다.

[코드 D-17]

className

와이드 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Wide' 입니다.

height

와이드는 width가 100%이고 height의 경우 고객사에서 지정 합니다. auto의 경우 영상의 크기 만큼 길어집니다.

wideBtn

와이드 버튼으로 와이드와 일반 모드를 토글하는 버튼 입니다.

플레이리스트 (playlist) 모듈

아래

는 설정에서 playlist 모듈 영역만 표시한 코드 입니다.

[코드 D-18]

소스 설정

보통 고객사에서 플레이리스트를 가지고 있고 그것을 서비스 하고자 한다면 그 정보를 소스를 입력해야 할 때 설정해야 합니다. 따라서 소스 설정을 이해해야 합니다. 플레이리스트 소스 설정은 이미 소스 이해하기 섹션에서

[코드 B-7]

와

[코드 B-8]

를 통해 살펴 보았고 이 설정이 플레이리스트 설정입니다.

아래

는 플레이리스트와 관계된 플레이어로서 플레이리스트 목록을 볼 수 있는 버튼을 활성화 하였고 기존 샘플에 있던 뒤로/앞으로 스킵 버튼을 숨기고 이전/다음 영상 보기 버튼도 활성화 한 플레이어 입니다.

[플레이어 D-18-1]

아래

는

[플레이어 D-18-1]

의 소스 코드 입니다.

[코드 D-18-1]

플레이리스트 목록 버튼을 클릭하면 목록이 나타나며 그 구성은 아래와 같습니다.

[표 D-18-1]

플레이리스트 목록의 구성

버튼	설명
추가버튼	플레이리스트에 소스를 추가 할 수 있는 버튼으로 클릭시 추가하는 화면이 나타납니다.
닫기버튼	플레이리스트 목록 화면을 닫을 수 있는 버튼 입니다.
삭제버튼	플레이리스트에서 소스를 삭제하는 버튼 입니다. (목록 뿐만 아니라 실제로 삭제되어 이전/다음 영상보기시 삭제된 영상은 재생되지 않습니다.)

플레이리스트 입력 화면

아래는 플레이리스트 목록에서 추가 버튼을 클릭한 경우 나타나는 플레이리스트 입력 화면 입니다.

[플레이어 D-18-2]

플레이리스트 설정

아래는 플레이리스트 모듈 설정의 속성 입니다.

useConfigList

플레이리스트를 설정 목록에 나타나는 것의 허용 유무 입니다. 속성값은 true, false가 있습니다.

previousBtn

이전 영상 보기 버튼 입니다.

nextBtn

다음 영상 보기 버튼 입니다.

addBtn

플레이리스트에 소스 추가 버튼 입니다.

menuBtn

플레이리스트 목록(메뉴)를 보여주는 버튼 입니다.

useName

소스에 이름 사용 유무 입니다. 이름이 없는 경우 파일명을 사용 합니다.

useImage

소스정보에 이미지 사용 유무 입니다.

useText

소스정보에 소스 설명 사용 유무 입니다.

closeOnClick

플레이리스트 목록이 표시된 후 클릭 이벤트로 목록창이 닫히는데 이 기능을 막고 싶다면 이 속성을 false로 설정 합니다.

size

플레이리스트 목록 최대 갯수 입니다. 0인 경우 무한대 입니다.

enableRotatePrevious

이전 영상을 보려 할 때 첫번째 영상 위치에 있는 경우 마지막 위치로 rotate 가능 여부로 true이면 마지막 위치로 가고 false이면 갈 수 없다는 메세지를 표시합니다. true, false가 아니면 첫번째 영상을 다시 재생 합니다.

enableRotateNext

다음 영상을 보려 할 때 마지막 영상 위치에 있는 경우 첫번째 위치로 rotate 가능 여부로 true이면 첫번째 위치로 가고 false이면 갈 수 없다는 메세지를 표시 합니다. true, false가 아니면 마지막 영상을 다시 재생 합니다.

unitName

플레이리스트 갯수의 단위 이름을 입력 합니다. 보통 설정 목록에서 갯수가 표시되는데 이 경우 사용하게 됩니다.

add

플레이리스트 추가시 호출되는 콜백함수로 data 파라미터가 전달 됩니다.

remove

플레이리스트 삭제시 호출되는 콜백함수로 data 파라미터가 전달 됩니다.

message

input

input 속성은 플레이리스트 입력 화면에 대한 설정으로 아래는 input 속성의 추가 속성들의 설명입니다.

input/

nameLength

플레이리스트 소스 이름의 최대 길이 입니다.

input/

srcLength

플레이리스트 소스 주소의 최대 길이 입니다.

input/

imageLength

플레이리스트 소스 이미지의 주소 최대 길이 입니다.

input/

textLength

플레이리스트 소스 설명의 최대 길이 입니다.

input/

hideAfterAppend

플레이리스트 추가 후 입력 박스를 닫을지 유무 입니다. true, false 입니다.

input/

showAfterAppend

플레이리스트 추가 후 목록(메뉴)를 표시 할지 유무 입니다. true, false 입니다.

input/

linkControlBtn

플레이리스트 목록창이 열려 있는 상태에서 컨트롤 영역의 추가 버튼을 클릭하면 입력창이 나타납니다. 이 때 입력창이 닫히면 목록창으로 돌아가는 것을 허용 할지 묻는 것으로 true이면 목록창으로 가고, false이면 입력창만 닫히고 목록창은 나타나지 않습니다.

input/

closeOnClick

기본적으로 입력창 이외의 영역을 클릭하면 창이 자동으로 닫힙니다. 이 기능을 끄고 싶다면 이 속성을 false로 설정합니다.

플레이어 선택 (switchSource) 모듈

보통 고객사에서 mp4파일을 가지고 있고 나아가 동일한 파일로 hls로 서비스를 하거나 유튜브로 서비스를 한다고 가정 할 때에 사용자가 mp4,hls,youtube와 같은 플레이어를 선택하게 하고자하는 경우 사용하는 기능(모듈) 입니다.

아래

는 설정에서 switchSource 모듈 영역만 표시한 코드 입니다.

[코드 D-19]

소스 설정

switchSource 모듈을 사용하려면 소스 입력시 결정되어야 하기에 소스 설정에서 switchSource 설정이 이루어져야 합니다. 이 설정은 화질모듈 설정과 유사합니다. 화질의 경우 소스설정에서 quality 속성을 사용하였으나, 여기서는 switchSource 속성을 사용 합니다.

[플레이어 D-19-1]

아래

는

[플레이어 D-19-1]

의 소스 코드 입니다.

[코드 D-19-1]

위 코드에서 2개의 플레이어에 관한 소스만 설정하였지만 2개 이상을 배열에 설정 할 수 있습니다. 나아가 각각의 원소는 기존의 소스설정과 같습니다. 이 말의 의미는 각 원소에 품질이나 자막등의 소스 설정을 다른 원소와 별개로 지정해야 합니다. 즉 SwitchSource 설정 앞 단계의 설정은 모두 무시 됩니다.
예를 들어 소스코드 17라인에 virtualTime을 switchSourcd 속성과 같은 depth(단계)에 설정한 것이 아니라 switchSourcd 다른 원소들과 별개로 설정되어 있읍니다. 마치 별개의 소스처럼 지정되어 있고 실제 플레이어에서도 별개로 동작 합니다.

[표 D-19-1]

switchSource source 설정 구성

속성	설명
playerName	플레이어 목록에 표시될 이름을 지정 합니다. 필수로 미지정시 정상 동작하지 않습니다.
patchClassName	플레이어 목록에 표시될 className을 지정 합니다.
select	처음에 선택될 player 유무 입니다.

아래

는 플레이리스트로 첫번째 영상은 일반 소스이고 두번째 소스는 mp4 혹은 youtube를 선택 할 수 있는 switchSource로 된 소스로 이루어진 플레이어 입니다. 최초 첫번째 음악 재생시 플레이리스트 목록 버튼만 존재하고 다음 영상 보기 버튼을 클릭하면 플레이어를 선택 할 수 있는 버튼이 함께 나타납니다.

[플레이어 D-19-2]

아래

는 위

[플레이어 D-19-2]

의 소스 코드 입니다.

[코드 D-19-2]

플레이어선택(switchSource 모듈) 설정

아래는 switchSource(플레이어선택) 모듈 설정의 속성 입니다.

switchSourceBtn

플레이어 선택 버튼 입니다.

closeOnClick

목록이 표시된 후 클릭 이벤트로 목록창이 닫히는데 이 기능을 막고 싶다면 이 속성을 false로 설정 합니다.

단축키 (key) 모듈

아래는 설정에서 key 모듈 영역만 표시한 코드 입니다.

[코드 D-20]

className

단축키 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Key' 입니다.

use

단축키 모듈 동작 유무 입니다. true와 false가 있습니다.

volumeStep

단축키로 볼륨 조절 시 증감량 입니다. 볼륨값은 0~100사이의 값입니다.

이어보기 (continueTime) 모듈

아래는 설정에서 continueTime 모듈 영역만 표시한 코드 입니다.

[코드 D-21]

message

이어보기가 설정된 경우 이어보기 모듈에서 자체의 메세지를 통해 이어보기 유무를 묻는 확인창이 나타납니다. 만약 다른 메세지를 원하는 경우 이 속성에 콜백함수를 만들어 원하는 메세지를 리턴하시면 해당 메세지가 확인창에 나타나게 됩니다.
이 때 함수에 이어볼 위치(초단위)가 첫번째 파라미터로 전달됩니다. 초단위를 00:00 와 같은 표기로 변경하고자 하는 경우 Media.secondsToTimeString(data) 을 사용하시면 됩니다.
Media는 D.module('imgtech.media.Media'); 로 Media Class를 얻을 수 있습니다.

autoplay

보통은 사용하지 않으나, 자동재생이 false인 경우 이어볼것은 묻는 창에서 클릭을 한 경우 자동재생을 원한다면 true 그렇지 않으면 false로 설정 합니다.

설정 (config) 모듈

본 플레이어에는 배속, 자막, 화질, 구간반복, 책갈피, 플레이리스트, 플레이어선택과 같이 목록을 보여주어야하는 버튼들이 많습니다. 이러한 버튼들을 플레이어 하나에 모두 표시 하는 것은 힘들 수 있습니다. 그래서 설정이라는 버튼을 통해 위의 기능들을 표시 할 수 있도록 하는 모듈 입니다.

아래

는 설정에서 config 모듈 영역만 표시한 코드 입니다.

[코드 D-22]

아래

는 설정버튼이 있고 클릭시 설정관련 목록이 나타나는 플레이어 입니다.

[플레이어 D-22-1]

아래

는

[플레이어 D-22-1]

의 소스 코드 입니다.

[코드 D-22-2]

className

설정 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Config' 입니다.

configBtn

설정 목록을 보여주는 버튼 입니다.

closeOnClick

설정 목록이 표시된 후 클릭 이벤트로 목록창이 닫히는데 이 기능을 막고 싶다면 이 속성을 false로 설정 합니다.

list

표시되는 설정 목록에 나타날 모듈들을 배열로 나열 합니다. 각각의 배열의 원소에는 name과 id가 있으며 name은 표시될 이름이고 id는 모듈의 id 입니다. 모듈의 id는 [표 C-3]에 있습니다.

앱 (app) 모듈

아래는 설정에서 app 모듈 영역만 표시한 코드 입니다.

[코드 D-23]

className

앱 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.App' 입니다.

exitBtn

나가기(종료) 버튼을 위한 속성으로 주로 창을 닫기 위한 버튼 입니다. 이는 보통 앱에서 앱을 닫기 위한 목적이지만 고객사에서는 다양하게 사용 할 수 있습니다. 이 속성은 다른 버튼 설정과 달리 함수로 이루어져 있고 그 함수가 버튼 설정을 리턴하는 구조 입니다. 이는 주로 앱안에서 동작하는 것이기 때문이고 앱과 통신이기 때문에 함수로 되어 있습니다.

appName

앱이름을 리턴 합니다.

isApp

앱 유무를 리턴 합니다.

isMobileApp

모바일 앱을 리턴 합니다. 보통 앱 유무를 리턴 합니다.

fullscreen

풀스크린시 앱으로 fullscreen 이벤트 전달을 위한 함수 입니다.

exitFullscreen

풀스크린에서 나갈 때 exitFullscreen 이벤트를 앱으로 전달을 위한 함수 입니다.

dissmiss

닫기 혹은 종료시 호출 하기 위한 함수 입니다. 나가기(종료/닫기) 버튼 클릭시 호출 됩니다.

stateChange

플레이어의 모든 이벤트를 앱으로 전달하기 위한 함수 입니다.

useVirtualScreen

버전 (version) 모듈

아래는 설정에서 version 모듈 영역만 표시한 코드 입니다.

[코드 D-24]

wait

버전이 표시된 경우 사라지기전 대기 시간 (1/1000초 단위) 입니다.

ignoreEvent

코드에서는 false로 되어 있으나, 실제로 true로 되어 있을 것 입니다. 이 기능은 오른쪽 마우스 클릭(context 메뉴) 이벤트에 반응하여 버전을 표시하는데 이 때 이벤트를 무시시켜 브라우저의 context메뉴를 막는 효과를 가질 수 있습니다. 이 기능을 막으려면 true, 그렇지 않으면 false 입니다.
본 메뉴얼에 표시된 플레이어는 모두 이 기능이 false로 되어 있어 소스보기 등을 할 수 있습니다.

광고 (ad) 모듈

아래

코드는 광고모듈의 설정 코드이며 광고 모듈은

소스 설정의 ad 속성

과 함께 사용됩니다.

[코드 D-25]

className

앱 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.Ad' 입니다.

progressTime

progressTime 속성은 광고 재생 중 seeking 가능 여부로서 값이 true이면 이미 재생된 위치까지만 seek가능하고 'disable'이면 seek를 완전히 막습니다. 다만 이 속성은 소스설정에 progressTime, disableSeekable 속성이 없어야 ad모듈의 progressTime 속성이 동작합니다. (항상 소스설정이 우선합니다.)

againAD

광고와 영상을 모두 보고 다시 볼 때 기존 광고를 초기화 하여 다시 볼 것인지를 설정 합니다. true이면 광고를 다시 봅니다. (단 콜백함수-start, end, currentTime-를 사용하는 경우 콜백함수의 결과에 따라 다릅니다.)

isEnableSkipAgainAd

이 값이 true이면 이미 본 광고를 다시 볼 때 기존에 스킵가능했다면 언제든 스킵 가능하도록 합니다. (단 콜백함수-start, end, currentTime-를 사용하는 경우 콜백함수의 결과에 따라 다릅니다.)

isEnableDetailAgainAd

이 값이 true이면 이미 본 광고를 다시 볼 때 기존에 광고자세히보기 버튼이 표시되었다면 표시 되도록 합니다. (단 콜백함수-start, end, currentTime-를 사용하는 경우 콜백함수의 결과에 따라 다릅니다.)

detailBtn

광고 자세히 보기 버튼으로 hideEtcButton, click 옵션이 있습니다.

detailBtn/hideEtcButton

버튼의 숨김 여부 입니다.

detailBtn/click

콜백함수로 이 속성에 함수를 지정하면 클릭시 해당 함수를 호출 합니다. 함수는 ad모듈의 멤버 함수처럼 행동 합니다. 단, 이 속성이 지정되지 않고 광고영상에 url 옵션이 설정되면 클릭시 해당 url로 window.open 합니다.

skipBtn

일정시간이 지나면 광고를 스킵 할 수 있는 경우 사용하는 스킵버튼 입니다. 이 속성에는 hideEtcButton, click 옵션이 있습니다.

skipBtn/hideEtcButton

버튼의 숨김 여부 입니다.

skipBtn/click

콜백함수로 이 속성에 함수를 지정하면 클릭시 해당 함수를 호출 합니다. 함수는 ad모듈의 멤버 함수처럼 행동 합니다. 단, 이 속성이 지정되지 않으면 일정 시간(skipTime)이 지나면 자동으로 스킵 할 수 있게 변경되며 클릭시 스킵하게 됩니다.

useYoutubeOSD

광고가 유튜브 영상인 경우 유튜브의 영상을 클릭하는 것을 막을 수 있게 하는 속성으로 false이면 유튜브의 버튼들이 클릭되지 않게 막습니다.

skipTime

스킵버튼을 사용하는 경우 스킵 가능한 시간(초단위)을 지정 합니다. 이 값을 지정하면 플레이어가 자체적으로 스킵가능한 시간을 계산하여 표시하고 스킵버튼 클릭시 스킵하게 됩니다.

값	설명
false	스킵에 대해 어떠한 처리도 하지 않습니다. (스킵버튼 설정에 따라 스킵버튼 박스가 나타날 수 있음)
true	광고 시작시 바로 스킵 가능 한 상태입니다.
초단위 숫자	설정된 값이 지나야 스킵 가능 합니다.

detailTime

이 속성을 사용하면 광고 자세히 보기 버튼 설정과 상관없이 detailTime에 적용된 시간(초단위)가 경과 되면 광고 자세히 보기 버튼이 표시 됩니다. 그 전에는 감춰지게 됩니다. 광고 소스의 설정에 detailTime이 지정되면 소스의 설정을 사용 합니다.

start

영상 시작전 광고가 먼저 보이게 하려는 경우 이 속성에 함수를 지정 합니다. 함수는 ad모듈의 멤버 함수처럼 행동 합니다. 매개변수로 data와 cb(callback)이 있으며 광고의 존재 유무를 cb로 전달 합니다. 해당 광고가 종료되면 또 다시 start 콜백함수를 호출하여 다음 광고가 있는지 묻게되며 더 이상 광고가 없다면 null 값을 cb로 전달해야 합니다.
만약 소스 설정의 ad/data에 start가 있다면 소스설정의 start 속성을 먼저 사용하고 본 start 속성을 사용합니다.

end

영상 종료후 광고가 보이게 하려는 경우 이 속성에 함수를 지정 합니다. 함수는 ad모듈의 멤버 함수처럼 행동 합니다. 매개변수로 data와 cb(callback)이 있으며 광고의 존재 유무를 cb로 전달 합니다. 해당 광고가 종료되면 또 다시 start 콜백함수를 호출하여 다음 광고가 있는지 묻게되며 더 이상 광고가 없다면 null 값을 cb로 전달해야 합니다.
만약 소스 설정의 ad/data에 end가 있다면 소스설정의 end 속성을 먼저 사용하고 본 end 속성을 사용합니다.

currentTime

영상 재생 중에 광고가 보이게 하려는 경우 이 속성에 함수를 지정 합니다. 함수는 ad모듈의 멤버 함수처럼 행동 합니다. 매개변수로 data와 currentTime, cb(callback)이 있으며 광고의 존재 유무를 cb로 전달 합니다. 해당 광고가 종료되면 또 다시 currentTime 콜백함수를 호출하여 다음 광고가 있는지 묻게되며 더 이상 광고가 없다면 null 값을 cb로 전달해야 합니다.
만약 소스 설정의 ad/data에 middle 속성이 있다면 소스설정의 middle 속성을 먼저 사용하고 본 currentTime 속성을 사용합니다. 다만 이 속성은 재생위치가 변화면 계속 호출 되기 때문에 middle 속성이 있고 그 호출 시점이 아니라도 이 속성은 계속 호출 됩니다.

adStateChange

광고 재생 이벤트를 특별히 여기에 지정된 콜백함수에 전달 합니다. 이 함수는 ad모듈의 멤버 함수처럼 행동 합니다.
주의사항으로 광고 영상이 완료되면 발생하는 STATE_CHANGE의 ENDED 이벤트는 createMediaPlayer 함수의 콜백함수로 전달되지 않고 adStateChange에만 전달 됩니다.

[코드 D-25]

의 45라인부터 62라인까지는 개발자가 수동으로 광고 스킵 기능을 처리를 하는 예제를 제시한 것 입니다.

clickLayout

값	설명
function	콜백함수로 광고 영상 클릭시 본 함수를 실행 합니다. 본 콜백함수는 ad모듈의 멤버함수로 동작합니다.
false	광고 영상을 클릭하면 기존 처럼 toggle(일시정지/재생 반복)만 수행 합니다.
true	[코드 D-25] 의 69~74라인의 함수 내용 처럼 광고를 일시정지 후 지정된 url로 window.open 합니다. 즉 단순히 url을 open하는 것이 목적이라면 function을 만들어 수작업으로 코딩 할 필요없이 'true'로 설정 합니다.

광고 (vast) 모듈

아래

코드는 광고모듈의 설정 코드이며 광고 모듈은

소스 설정의 vast 속성

과 함께 사용됩니다.
이 모듈은 (3.0.10버전) 부터 지원 합니다.

[코드 D-26]

className

앱 모듈은 className을 생략 할 수 없으며 기본값은 'imgtech.media.module.VAST' 입니다.

requestUrl

VAST광고 정보가 담긴 xml 정보를 넣습니다.

requestUrl/url

VAST광고 정보가 담긴 xml 파일의 url 정보를 설정합니다.

toggle

광고 재생시 토글(일시정지/재생) 허용 유무를 설정 합니다. false이면 허용하지 않음, true이면 허용입니다.

progressTime

광고재생시 광고가 진행된 영역에 대해 시크 가능 유무를 설정합니다. 'disable'이면 시크를 막습니다.

detailBtn

광고자세히보기 버튼 설정 입니다.

skipBtn

스킵 버튼 설정 입니다.

clickLayout

광고 영상 영역 클릭시 광고 url로 이동 유무 입니다.

duration

영상의 전체 시간정보 이벤트가 발생하면 시간을 전달할 콜백함수를 설정 합니다. 이 때 vast 모듈의 addMiddleVast 함수를 호출 하여 중간광고가 재생 될 위치(시간-초단위)를 설정 할 수 있습니다.
만약 영상 시작전 광고가 있다면 해당 광고들이 진행되고 실제 영상 재생전에 이 콜백함수는 호출 됩니다.
보통 소스의 vast 설정에서 middle을 설정하지 않고 영상의 전체 시간을 안 후 설정하고자 하는 경우 이 콜백함수를 사용 할 수 있습니다.

sendTracking

vast 서버와 통신 후 통신 정보를 sendTracking 콜백함수로 전달 합니다. 단 결과를 전달하는 것은 아닙니다.

라디오 (radio) 모듈

아래는 설정에서 radio 모듈 영역만 표시한 코드 입니다.

[코드 D-26]

라디오 모듈은 입력된 소스가 화면이 없는 라디오 형식인 경우 사용하는 모듈 입니다. 보통 소스입력에 radio 설정을 하여 radio모듈이 동작 합니다. 소스설정의 radio설정을 함께 보셔야 합니다.

className

className은 생략가능하며 기본값은 'imgtech.media.module.Radio' 입니다.

size

size 설정은 함수로 보통은 위 [코드 D-26]과 같이 width와 height의 값이 undefined이나, 소스설정에서 hideScreen이 true인 경우 height를 설정해야 합니다.
만약 미니플레이어를 함께 사용하는 경우 크기를 변경하고자 하는 경우 이 설정에서 원하는 크기를 리턴해야 합니다.
보통(UI변경이 없는 경우)은 50을 리턴 하시면 됩니다.

backgroundImage

라디오 재생중 영상 대신 표시될 이미지를 설정 합니다. 이 설정은 소스 입력시에 할 수 있습니다. (소스 설정 참조)

주의사항

소스설정에 hideScreen을 사용하는 경우 wide 버튼을 감추게 됩니다. (3.0.19버전이후 hideScreen모드에서 fullscreen이 사용가능하도록 하였습니다.)
영상 소스와 라디오(hideScreen) 전환되면서 미니플레이어(openLayer)를 사용하는 경우 버그를 최대한 잡았으나 많은 테스트가 필요 한 것 같습니다.
볼륨이 세로 모드인 경우 hideScreen 라디오에서 내부적으로 가로모드로 변경되며 이후 영상을 사용하는 경우 (hideScreen이 false인 라디오 포함) 다시 세로모드로 전환 됩니다.

추천 (recommend) 모듈

영상이 일정시간이 지나면 추천 영상(링크)을 보여주는 기능 입니다. (3.1.24 버전)

[코드 D-29]

이 모듈을 사용하고 소스 설정에 recommend 설정을 함께 적용해야 합니다.

className

className은 생략가능하며 기본값은 'imgtech.media.module.Recommend' 입니다.

모듈 설정

모듈 설정은 코드 D-29와 같이 recommend에 className을 지정 합니다. 이 기능은 영상이 끝나는 시점에 추천 영상을 표시하는 것이므로 영상이 rotate 되지 않게 하기 위해 playlist 모듈 설정에서 enableRotatePrevious와 enableRotateNext 속성을 false로 지정 합니다.

[코드 D-30]

소스 설정

recommend기능을 사용하고자 한다면 코드 D-30와 같이 소스 설정에 recommend 설정을 해야 합니다.

time

time은 영상이 종료되기 몇 초전에 추천영상이 뜨게 할지를 나타내는 숫자 초단위 입니다.

src

src는 추천 영상 정보로 left와 right가 있습니다. left는 왼쪽에 right는 오른쪽에 표시되는 추천 영상을 의미 합니다.

src/left/link

link는 클릭시 이동해야 할 웹페이지 주소를 입력 합니다.

src/left/poster

poster는 추천 영상에 표시 될 이미지 주소를 입력 합니다.

disableSeekToFirst

disableSeekToFirst는 영상 종료시 처음으로 이동 하는 것을 막기 위한 설정 입니다.

채팅 (chat) 모듈

채팅모듈은 3.1.12 이상 버전에서만 사용 할 수 있습니다.
아래는 설정에서 chat 모듈 영역만 표시한 코드 입니다.

[코드 D-27]

채팅모듈은 플레이어 서비스 중 채팅서비스를 함께 사용하고자 하는 경우 사용하는 모듈 입니다.
이 모듈은 채팅서버와 함께 사용해야 합니다.
샘플 html은 제공되는 채팅서버에 존재 합니다.

className

className은 'imgtech.media.module.Chat' 으로 생략 불가능 합니다.

use

채팅 모듈 사용 유무로 true 혹은 false 입니다.

focus

플레이어가 로드 될 때 채팅입력박스에 포커스를 위치 시킬지 유무 입니다.

log/info

콘솔 로그창에 일반적인 로그를 표시합니다.

log/error

콘솔 로그창에 에러 로그를 표시합니다.

dateFormat

채팅메세지를 화면에 표시 할 때 나타나는 시간 형식 입니다.

useFace

채팅메세지를 화면에 표시 할 때 사용자 대표 이미지 표시 유무 입니다.

url

채팅서버의 주소를 입력 합니다.
채팅서버가 하나만 존재하는 경우에는 'ws://html5.imgtech.co.kr:3000' 와 같이 입력하고
여러대의 채팅서버가 존재하는 경우에는 './api_get_server.php' 와 같이 입력 합니다.
'./api_get_server.php'은 채팅서버에 포함되어 있고 해당 url을 입력하면 됩니다.

title

채팅방의 이름을 입력 합니다.

채팅서버에 로그인하기 위한 정보를 입력 합니다.
채팅서버에는 channelId와 jwt 속성이 있습니다.

대화명의 id(채널 id)를 입력합니다.

사용자의 아이디/대화명을 입력받는데 이 정보는 JWT 규약에 따릅니다.
userId, userNick을 가지는 JWT를 만드는 샘플은 채팅서버의 sample_jwt.php 입니다.

face

채팅메세지 표시시 나타나는 사용자의 대표이미지(얼굴) 아이콘 설정입니다.

face/type

'auto'로 설정하세요.

face/baseUrl

대표이미지가 있는 웹 주소를 입력 합니다.

face/defaultIcon

대표이미지를 선택하지 않은 사용자인 경우 사용할 대표이미지 이름입니다.

face/icons

face/updateUrl

대표이미지를 변경하고자 할 때 대표이미지를 변경하는 웹주소를 입력합니다.
만약 로그인 후 대표이미지를 변경하고자 하는 경우 이 페이지를 사용하지 않을 수 있습니다.
제공된 서버에 api_update_face 파일이 대표이미지를 변경하는 페이지 입니다.

face/callback

대표이미지 변경 후 결과를 알려 줍니다.

nick

대화명을 변경하고자 할 때 사용하는 설정입니다.

nick/type

'auto'로 설정하세요.

nick/updateUrl

대화명을 변경하고 할 때 변경하는 웹페이지 주소 입니다.
만약 로그인 후 대화명을 변경하고자 하는 경우 이 페이지를 사용하지 않을 수 있습니다.
제공된 서버에 api_update_nick.php 파일이 닉네임 변경하는 페이지 입니다.

nick/callback

대화명 변경 후 결과를 callback 함수로 전달 합니다.

    function(e){
        if(e.type=='UPDATE_NICK_OK'){
            
        }
    }

alone

플레이어는 사용하지 않고 순수 채팅 화면만 화면에 표시 되길 원하는 경우 사용하는 설정 입니다.
이 설정안에는 uid, resourceText 옵션이 있습니다.

alone/uid

채팅이 표시될 엘리면트의 쿼리 스트링 입니다. 예를 들어 '#mediaplayer' 와 같습니다.

alone/resourceText

채팅화면이 있는 html 스트링 입니다. catvod.js 파일에 getHtmlChatResource 함수에 기본 채팅화면이 html 스트링으로 되어 있습니다.

window.createChatApp

채팅서비스만 이용하고자 하는 경우를 위해 alone 설정을 하지 않고
window.createChatApp 함수를 사용 할 수 있습니다.
이 내용은 catvod.js에 정의 되어 있습니다.
createChatApp(id, param, callback);
이 함수 호출 후 open 함수를 아래와 같이 호출해야만 실제 채팅서비스가 시작 됩니다.

    var chat = window.createChatApp('#mediaplayer', {}, function(e){});
    chat.open();

id: 채팅서비스가 표시될 element의 쿼리 스트링으로 '#id'와 같이 지정합니다.
param: 위에 정의된 설정을 변경하고자 하는 경우 설정 내용을 param으로 전달 합니다.
callback: 채팅서비스가 전달하는 콜백함수 입니다.

아래

는 채팅서비스만 존재하는 샘플이며, 서버설정에 자동으로 사용자 아이디,닉네임을 생성하도록 되어있어 임의의 대화명으로 대화 하게 됩니다.

[플레이어 D-23-1]

아래는 플레이어 D-23-1에 대한 소스코드 입니다. 50라인에 chat.open() 함수를 호출하여 채팅서비스가 시작된다는 점을 확인하세요.

[코드 D-28]

위 [코드 D-28]에서 face설정 등을 catvod.js에 설정 하셔도 됩니다.

아래

는 플레이어와 채팅서비스를 동시에 사용하는 샘플 입니다. 아래에서 fullscreen 버튼을 클릭하시면 영상 위에서 채팅을 할 수 있습니다.

[플레이어 D-23-2]

아래는 플레이어 D-23-2에 대한 소스코드 입니다.
아래 코드에서 49라인 callback함수가 있으며 콜백함수 내부의 52라인에 this.open 함수 호출을 통해 채팅서비스가 시작된다는 점을 확안하세요.
만약 callback함수가 없다면 자동으로 채팅서비스가 시작됩니다. 여기에서는 콜백함수가 있기 때문에 내부에서 open함수를 호출해야 합니다.

[코드 D-29]

플래시 설정

플래시 설정은 아직 별도로 제공하지 않고 특별히 설정 영역의 isPseudo 속성만 존재 합니다.

isPseudo

플래시는 재생위치를 변경하는 것이 매우 어렵습니다. isPseudo이 false인 경우 플래시는 캐싱된 영역까지만 재생위치를 변경 할 수 있습니다. 그러나 isPseudo이 true 인 경우에는 캐싱된 영역과 상관없이 재생위치를 변경 할 수 있습니다.
그렇다면 isPseudo을 true로 설정하여 재생위치 변경이 되면 좋겠지만 서버에 별도의 설정을 추가로 해 주어야 합니다.
고객사에서는 걱정할 것이 없는 것이 이 작업은 CDN에서 해주고 있습니다. (미디어 파일 서버를 운영하는 CDN에 요청하세요!)

아파치에서 pseudo 서버설정

[코드 F-1]

LoadModule h264_streaming_module /usr/lib64/httpd/modules/mod_h264_streaming.so AddHandler h264-streaming.extensions .mp4

centos에서 pseudo 설치 예제

서버의 상황에 따라 설치 방법이 다를 수 있습니다 !!!

[코드 F-2]

# yum install httpd-devel # wget http://h264.code-shop.com/download/apache_mod_h264_streaming-2.2.7.tar.gz # tar zxvf apache_mod_h264_streaming-2.2.7.tar.gz # cd apache_mod_h264_streaming-2.2.7 # ./configure --with-apxs=`which apxs2` # make # make install

HLS 설정

HLS가 지원하는 설정으로 HLS 플레이어로 동작시 사용하는 설정 입니다.
아래는 HLS 설정 코드 입니다.

[코드 F-3]

유튜브 설정

아래는 유튜브 설정 코드 입니다.

[코드 F-4]

quality

화질의 경우 유튜브에서 제공하고 있습니다. 그러나 사용자가 화질에 따라 별도의 소스(url)을 지정하고 싶은 경우가 있을 수 있습니다. 그래서 본 플레이어에서는 화질에 대한 속성을 지정 할 수 있게 하였습니다.

quality 속성	설명
youtube	Youtube의 화질만 사용합니다. (유튜브에서 화질을 강제하고 있기 때문에 실제로 선택해도 적용되지는 않습니다. )
source	소스 설정의 화질을 사용 합니다.
all	유튜브의 화질과 소스 설정의 화질을 모두 사용 합니다.
none	화질을 사용하지 않습니다. (이것이 디폴트 입니다.)

qualityLabel

유튜브에서 제공화는 화질에 대한 표시 이름을 변경하기 위한 설정으로 배열로 이루어져 있으며 각각의 원소는 유뷰브의 화질 code에 대한 label로 이루어져 있습니다.

rateLabel

유튜브에서 제공하는 배속정보에 대한 이름을 변경하기 위한 설정으로 배열로 이루어져 있으며 각각의 원소는 유튜브의 배속 code에 대한 label로 이루어져 있습니다.

subtitle

유튜브에서 제공하는 자막이 있으나 별도의 자막(url)을 사용하고 싶은 경우 이 속성을 사용하여 변경 할 수 있습니다.

subtitle 속성	설명
youtube	Youtube의 자막만 사용합니다.
source	소스 설정의 자막을 사용 합니다.
all	유튜브의 자막과 소스 설정의 자막을 모두 사용 합니다.
none	자막을 사용하지 않습니다.

autoLanguage

유튜브에서 지원하는 자동 번역 자막 사용 유무 입니다. true 혹은 false를 가 있으며, 영상에 따라 지원하지 않는 경우가 존재 합니다.

useYoutubeOSD

유튜브에서 제공하는 화면상의 OSD 영역의 클릭을 막기 위한 속성으로 true이면 유튜브 OSD영역을 클릭 할 수 있으며, false이면 유튜브 OSD영역을 클릭하여도 OSD영역의 버튼등이 클릭되지 않습니다.

width, height

유튜브의 영상크기를 알수 있는 방법이 현재 없습니다. 이에 영상의 크기를 지정 할 수 있도록 했습니다.

playerVars

유튜브 api가 제공하는 속성을 변경 할 수 있도록 그 속성을 나열 하였습니다. (본 플레이어 사용시 본 플레이어가 기본으로 제공하는 속성을 사용하시는 것이 좋습니다.)

pauseImage (3.1.1)

유튜브 영상 재생시 재생중 상태가 아니면 유튜브 화면을 설정된 이미지가 표시 되도록 합니다. 이는 정지 상태인 경우 유튜브의 설정등이 화면에 표시되는 것이 싫은 경우 설정 할 수 있습니다.

pauseImageTime (3.1.1)

pauseImage 설정과 함께 사용되며 처음 몇 초 동안 표시되는 유튜브의 내용이 표시되는 것이 싫은 경우 해당 초단위 숫자를 입력 합니다.

디버그 설정

아래는 디버그 설정 코드 입니다.

[코드 F-5]

[코드 F-5]에서 1라인~3라인은 E변수의 값을 얻기 위한 것으로, 12라인과 33라인과 같은 영역에서 사용하기 위한 코드 입니다. 대문자 E는 플레이어 객체의 player.EVENT와 같습니다.

use

디버그 모드 사용 유무로 true, false가 있으며, true인 경우 개발자도구에 콘솔로그를 작성 합니다.

flash

플래시를 사용하는 경우 플래시 로그의 콘솔 출력 여부 입니다.

startType

displaySource

displayType

displayClassName

disable

배열로서 플레이어에 이벤트가 많아 자주사용되거나 보고싶지 않은 이벤트를 지정하여 콘솔창에 나타나지 않게 합니다.

special

배열로서 다른 로그와 다르게 표시하여 눈에 잘 보이게 하고 싶은 이벤트를 지정 합니다.

element

css selector 값으로 지정된 엘리먼트에 로그를 표시 합니다.

url

지정된 url로 로그를 전송 합니다.

콜백함수와 이벤트 이해하기

클릭이벤트를 알고 싶은 경우 이벤트 리스너 콜백함수를 엘리먼트에 연결하여 사용하면 이벤트 발생시 연결된 콜백함수를 호출하고 이벤트를 전달 합니다. 이와 같이 플레이어 내부의 이벤트 발생을 알고 싶은 경우가 있습니다.
이러한 경우 createMediaPlayer 함수 4번째 파라미터의 콜백함수로 이벤트를 전달 합니다.
아래에 콜백함수를 삽입한 코드를 표시 하였습니다. (4번째 파라미터가 콜백함수 입니다.)

[코드 E-1]

(function(){ window.createMediaPlayer('#mediaplayer', source, {}, function(e){ var type = e.type; }); })();

[코드 E-1]의 콜백함수의 첫번째 argument로 이벤트를 전달합니다. 이 이벤트의 종류가 많아 이를 구분하기 위해 이벤트의 type 속성을 통해 이벤트를 구분 할 수 있습니다.

콜백함수는 플레이어 객체

콜백함수 내에서 this는 플레이어 객체 입니다. [코드 B-4]에서 player.source() 함수를 통해 소스를 입력하는 코드가 있습니다. 그 코드에서의 player는 플레이어객체 입니다.
마찬가지로 callback 함수내의 this 역시 플레이어 객체이므로 callback 함수내에서 this.source() 함수를 사용 할 수 있습니다.

준비 완료 상태

최초 createMediaPlayer 함수 호출 시 플레이어는 HTML을 가지고 플레이어 골격을 구성하고 각 모듈들도 필요한 작업을 수행 합니다. 이 작업이 완료되면 비로서 외부와 문제없이 플레이어로서의 기능을 수행 할 수 있게 됩니다. 이 상태가 되면 플레이어는 ON_READY 라는 이벤트를 발생 시키고, 이후 부터 플레이어의 api 호출 등을 사용 할 수 있습니다.

일반적으로 플레이어의 준비 상태를 확인 할 필요가 없지만, 확인이 필요한 경우 아래 코드를 참고 하세요.

[코드 E-2]

(function(){ var player = window.createMediaPlayer('#mediaplayer', source, {}, function(e){ if(e.type==this.EVENT.ON_READY){ // 준비 상태 입니다. } }); if( player.isReady() ){ // 준비 상태 입니다. (isReady 함수는 버전 3부터 제공 합니다.) } })();

[코드 E-2] 3번라인에서 e.type이 this.EVENT.ON_READY 이면 준비상태임을 의미 합니다. 또한 player객체에 isReady라는 함수를 8번라인과 같이 사용하여 준비상태인지 확인 할 수 있습니다. (isReady 함수는 버전 3 부터 제공 합니다.)

다음 섹션 부터 이벤트에 무엇이 있는지 보고 각각의 이벤트에 대해 학습합니다.

이벤트

아래

에 이벤트의 종류를 나열 하였습니다.

[표 F-1]

이벤트 속성

타입	설명
STATE_CHANGE	플레이어의 상태 변화시 발생하는 이벤트 입니다.
RATE_CHANGE	배속 변화시 발생하는 이벤트 입니다.
QUALITY_CHANGE	화질 변화시 발생하는 이벤트 입니다.
DURATION_CHANGE	영상의 총 재생시간 변화시 발생하는 이벤트 입니다. (주로 소스 입력 후 발생 합니다.)
CURRENT_TIME_CHANGE	재생 시간 변화시 발생하는 이벤트 입니다.
BUFFERING_CHANGE	버퍼링 변화시 발생하는 이벤트 입니다.
VOLUME_CHANGE	볼륨 변화시 발생하는 이벤트 입니다.
SIZE_CHANGE	플레이어의 크기 변경시 발생하는 이벤트 입니다.
RESIZE_WINDOW	브라우저의 크기 변경시 발생하는 이벤트 입니다.
FULLSCREEN_CHANGE	전체화면으로 들어가거나 일반화면으로 나올 때 발생하는 이벤트 입니다.
VIDEO_SIZE_DATA	입력 영상의 크기가 변경되면 발생하는 이벤트 입니다. (주로 소스 입력 후 발생 합니다.)
RESET
ON_SYNC
ON_READY	플레이어가 준비 상태가 되면 발생하는 이벤트 입니다.
ON_BEFORE_PLAY	소스 입력 후 재생되기 바로전에 호출 되는 이벤트 입니다.
ON_BEFORE_DEVICE_PLAY	플레이어의 디바이스(flash,video,hls,youtube 등)에서 최초 재생 바로전에 호출 됩니다.
ON_BEFORE_ONCE_PLAY	본 플레이어에서 최초 재생 바로 전에 호출 됩니다.
PLAY_MEDIA	재생 하라는 이벤트 입니다.
PAUSE_MEDIA	일시중지 하라는 이벤트 입니다.
STOP_MEDIA	정지 하라는 이벤트 입니다.
PREVIOUS_MEDIA	이전 소스(영상)를 입력하여 재생 하라는 이벤트 입니다.
NEXT_MEDIA	다음 소스(영상)를 입력하여 재생 하라는 이벤트 입니다.
CURRENT_MEDIA	현재 소스(영상)를 재입력하여 다시 재생 하라는 이벤트 입니다.
MUTE_MEDIA	볼륨을 무음으로 변경하라는 이벤트 입니다.
SET_VOLUME	볼륨을 변경 하라는 이벤트 입니다.
SEEKTO_MEDIA	재생위치를 변경 하라는 이벤트 입니다.
SET_PLAYBACK_RATE	배속을 변경 하라는 이벤트 입니다.
SET_PLAYBACK_QUALITY	화질을 변경 하라는 이벤트 입니다.
SET_PLAYBACK_SUBTITLE	자막을 변경 하라는 이벤트 입니다.
SET_SIZE	플레이어의 크기를 변경 하라는 이벤트 입니다.
SET_RATE
SET_FULLSCREEN	풀스크린으로 변경 하라는 이벤트 입니다.
EXIT_FULLSCREEN	풀스크린에서 일반화면으로 변경 하라는 이벤트 입니다.
CAN_PLAY	재생 할 수 있는 상태라는 이벤트 입니다.
WAITTING	버퍼링 등의 상태를 의미 합니다.
INDEX_MEDIA	플레이리스트에서 index위치의 소스(영상)을 입력하여 재생하라는 이벤트 입니다.
CONTINUE_TIME
SELECT_SOURCE
SELECTING_SOURCE
SELECTED_SOURCE
ON_ERROR	에러 발생시 호출되는 이벤트 입니다.
WIDE_CHANGE	와이드 모드 상태가 변경되면 발생하는 이벤트 입니다.
OPENLAYER_CHANGE	미니플레이어의 상태가 변경되면 발생하는 이벤트 입니다.
ORIENTATION_CHANGE	가로/세로 모드 변경시 발생하는 이벤트 입니다.
SUBTITLE_EVENT	자막 파일과 화면에 자막 표시와 관계된 이벤트 입니다.
CLICK_EVENT	클릭이벤트가 발생하면 발생하는 이벤트 입니다.
CONTROL_EVENT	컨트롤 영역과 관계된 이벤트 입니다.
SELECT_AD	광고있는 경우 광고영상을 선택하기 위한 이벤트 입니다.
SELECTING_AD	광고영상을 선택하는 중임을 의미하는 이벤트 입니다.
SELECTED_AD	광고 영상이 선택되었음을 의미하는 이벤트 입니다.
SELECT_VAST	VAST 광고있는 경우 광고영상을 선택하기 위한 이벤트 입니다.
SELECTING_VAST	VAST 광고영상을 선택하는 중임을 의미하는 이벤트 입니다.
SELECTED_VAST	VAST 광고 영상이 선택되었음을 의미하는 이벤트 입니다.

STATE_CHANGE

플레이어의 상태 변화시 발생하는 이벤트로

아래

와 같은 속성을 가집니다.

[표 F-2]

STATE_CHANGE 속성

속성	설명
data	상태에 대한 값으로 Media.STATE 객체의 속성입니다.

아래

는 STATE_CHANGE에 대한 값으로 Meida.STATE의 속성 표 입니다.

[표 F-3]

Media.STATE 속성

속성	설명
UNSTARTED	초기 상태 입니다.
SETSOURCE	소스가 입력된 상태 입니다.
CUED	재생 준비된 상태 입니다.
PLAYING	재생 중 상태 입니다.
BUFFERING	버퍼링 상태 입니다.
PAUSED	일시정지 상태 입니다.
ENDED	재생 완료 상태 입니다.

아래는 코드 예제로 STATE_CHANGE 이벤트 발생시 createMediaPlayer함수 4번째 파라미터 콜백함수로 전달 됩니다. 이 때 전달된 e 파라미터에서 e.type과 e.data를 적절히 활용 하시면 됩니다.

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.STATE_CHANGE){ if(e.data==this.STATE.SETSOURCE){ // 소스가 입력된 상태 } } });

RATE_CHANGE

배속 변화시 발생하는 이벤트로

아래

와 같은 속성을 가집니다.

[표 F-3]

RATE_CHANGE 속성

속성	설명
data	배속 모듈에서 설정한 배속 정보의 배열중 선택된(변경된) 원소 입니다.

아래

는 RATE_CHANGE 이벤트의 data 속성 표 입니다.

[표 F-4]

RATE_CHANGE이벤트 data 속성

속성	설명
value	배속값으로 정수 혹은 실수 입니다.
context	미사용
cvalue	화면에 표시되는 문자열로 value의 이름이라 할 수 있습니다.

아래는 코드 예제로 RATE_CHANGE 이벤트 발생시 createMediaPlayer함수 4번째 파라미터 콜백함수로 전달 됩니다. 이 때 전달된 e 파라미터에서 e.type과 e.data를 적절히 활용 하시면 됩니다.

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.RATE_CHANGE){ // e.data.context : rate 모듈 설정의 rateInfo 배열에서 선택된 원소의 context 값입니다. // e.data.cvalue : rate 모듈 설정의 rateInfo 배열에서 선택된 원소의 cvalue 값입니다. // e.data.value : rate 모듈 설정의 rateInfo 배열에서 선택된 원소의 value 값입니다. } });

DURATION_CHANGE

영상의 총 재생 시간 변경시 발생하는 이벤트 입니다. 보통 영상 입력 후 한번 발생 하는 이벤트 입니다.

DURATION_CHANGE 속성

속성	설명
data	DURATION_CHANGE 이벤트의 데이타가 저장되며 전체 재생 시간과 현재 재생 위치가 들어 갑니다.

아래는 DURATION_CHANGE 이벤트의 data 속성 표 입니다.

속성	설명
duration	영상의 전체 재생 시간 (초단위) 입니다.
currentTime	재생 위치 시간(초단위) 입니다.

아래는 코드 예제로 DURATION_CHANGE 이벤트 발생시 createMediaPlayer함수 4번째 파라미터 콜백함수로 전달 됩니다. 이 때 전달된 e 파라미터에서 e.type과 e.data를 적절히 활용 하시면 됩니다.

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.DURATION_CHANGE){ // e.data.duration : 영상의 총 재생 시간 (초단위) // e.data.currentTime : 재생 위치 (초단위) } });

CURRENT_TIME_CHANGE

재생 시간 변화시 발생하는 이벤트 입니다.

CURRENT_TIME_CHANGE 속성

속성	설명
data	CURRENT_TIME_CHANGE 이벤트의 데이타가 저장되며 변경된 재생 위치와 전체 재생 시간이 들어 갑니다.

아래는 CURRENT_TIME_CHANGE 이벤트의 data 속성 표 입니다.

속성	설명
currentTime	변경된 재생 위치 시간(초단위) 입니다.
duration	영상의 전체 재생 시간 (초단위) 입니다.

아래는 코드 예제로 CURRENT_TIME_CHANGE 이벤트 발생시 createMediaPlayer함수 4번째 파라미터 콜백함수로 전달 됩니다. 이 때 전달된 e 파라미터에서 e.type과 e.data를 적절히 활용 하시면 됩니다.

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.CURRENT_TIME_CHANGE){ // e.data.currentTime : 변경된 재생 위치 (초단위) // e.data.duration : 영상의 총 재생 시간 (초단위) } });

VOLUME_CHANGE

볼륨 변경시 발생하는 이벤트 입니다.

VOLUME_CHANGE 속성

속성	설명
data	VOLUME_CHANGE 이벤트의 데이타가 저장되며 변경된 볼륨과 무음유무가 있습니다.

아래는 VOLUME_CHANGE 이벤트의 data 속성 표 입니다.

속성	설명
volume	변경된 볼륨 값 입니다. (0~100)
muted	음소거 유무로 true이면 음소거 상태이고 false이면 소리가 volume의 크기에 따라 나오는 것을 의미 합니다.

아래는 코드 예제로 VOLUME_CHANGE 이벤트 발생시 createMediaPlayer함수 4번째 파라미터 콜백함수로 전달 됩니다. 이 때 전달된 e 파라미터에서 e.type과 e.data를 적절히 활용 하시면 됩니다.

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.VOLUME_CHANGE){ // e.data.volume // e.data.muted } });

FULLSCREEN_CHANGE

전체화면과 일반화면이 변경시 발생하는 이벤트 입니다.

FULLSCREEN_CHANGE 속성

속성	설명
data	FULLSCREEN_CHANGE 이벤트의 데이타가 저장되며 fullscreen 유무가 true 혹은 false 로 저장 됩니다.

아래는 코드 예제로 FULLSCREEN_CHANGE 이벤트 발생시 createMediaPlayer함수 4번째 파라미터 콜백함수로 전달 됩니다. 이 때 전달된 e 파라미터에서 e.type과 e.data를 적절히 활용 하시면 됩니다.

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.FULLSCREEN_CHANGE){ if(e.data){ // 전체화면 }else{ // 일반화면 } } });

ON_READY

플레이어가 생성된 후 준비과 완료되어 사용자가 플레이어를 사용 할 수 있는 상태에 발생하는 이벤트 입니다.

아래는 코드 예제로 ON_READY 이벤트 발생시 createMediaPlayer함수 4번째 파라미터 콜백함수로 전달 됩니다.

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.ON_READY){ // 플레이어가 준비상태가 되었으므로 소스(동영상 주소)를 플레이어에 입력 할 수 있습니다. this.source(source); } });

API 개념 이해하기

본 플레이어는 api를 호출 한다고 해서 바로 적용되는 구조가 아닙니다. '이벤트' 섹션을 보면 'PLAY_MEDIA'와 같은 이벤트가 있고 그 설명이 재생 하라는 이벤트라고 되어 있습니다. 즉 player.play() 라는 함수가 있다고 가정하고 play()라는 함수를 호출 한다고 해서 바로 재생되는 것이 아니라 재생 하라는 이벤트가 발생해야 정상적으로 재생이 된다는 것을 의미 합니다. 이는 재생을 시키는 모듈이 따로 있다는 것을 의미 합니다.

본 플레이어은 다양한 디바이스(flash,video,hls,youtube 등)이 존재하고 각각의 디바이스 마저 모듈로 되어 있습니다. 본 플레이어는 모든 것이 모듈로 이루어져 있고 대부분 이벤트로 서로 통신하는 구조 입니다.

모듈들은 어떤 모듈이 어떤 동작을 하는지 알지 못합니다. 최소한의 인터페이스만을 알 뿐 입니다. 따라서 api에 따라 호출 결과가 바로 발생하지 않을 수 있다는 것을 이해해야 합니다.

또한 본 플레이어 뿐만아니라 다른 플레이어들도 플레이어 그 자체 처리방식으로 인해 재생하라는 명령과 같은 경우 그 즉시 결과가 리턴 될 수 없습니다.

마지막으로 다른 이유들도 있겠지만 위와같은 이유로 인해 api를 호출 하여 어떤 데이타를 얻었다고 해서 0.1초 뒤 혹은 10초 뒤의 플레이어의 값과 다를 수 있다는 것을 이해해야 합니다.

API

아래에 플레이어 객체가 제공하는 API를 나열 하였습니다.

API	설명
currentMediaSource()	현재 재생중인 소스를 리턴 합니다. (소스는 Source객체로 입력된 정보는 input이라는 속성을 확인해야 합니다.)
mediaSource()	플레이리스트 전체 소스를 리턴 합니다.
getPlayerType()	플레이어의 타입을 리턴 합니다. (flash,video,hls,youtube 등)
module(id)	모듈 ID를 입력하여 플레이어 내부에서 동작하는 모듈을 얻습니다.
addWatchTimeModule()
device()	디바이스 객체를 리턴 합니다. (flash,video,hls,youtube 등)
getSwitchSourceData()	현재 재생중인 switchSource 데이타를 제공 합니다. switchSource데이타가 아니면 null을 리턴 합니다.
getADData()	현재 재생중인 AD(광고영상) 데이타를 제공 합니다. AD데이타가 아니면 null을 리턴 합니다.
getPlayerState()	플레이어의 상태를 리턴 합니다.
isPlaying()	현재 재생중인지 유무를 리턴 합니다.
play()	PLAY_MEDIA 이벤트를 발생시킵니다.
pause()	PAUSE_MEDIA 이벤트를 발생시킵니다.
toggle()	재생중이면 PAUSE_MEDIA이벤트를 일시정지중이면 PLAY_MEDIA 이벤트를 발생 시킵니다.
stop()	STOP_MEDIA 이벤트를 발생시킵니다
previous()	PREVIOUS_MEDIA 이벤트를 발생시킵니다. (이전 영상 재생)
next()	NEXT_MEDIA 이벤트를 발생시킵니다. (다음 영상 재생)
current()	CURRENT_MEDIA 이벤트를 발생시킵니다. (현재 영상 재시작)
index(index)	INDEX_MEDIA 이벤트를 발생 시킵니다. (지정된 index 위치의 소스 재생)
getVolume()	현재 볼륨값을 리턴 합니다. (0~100사이값)
setVolume(value)	SET_VOLUME 이벤트를 발생시킵니다. (볼륨 설정, 0~100사이값)
mute()	MUTE_MEDIA 이벤트를 발생시킵니다. (무음)
unMute()	MUTE_MEDIA 이벤트를 발생시킵니다. (볼륨 활성화)
isMuted()	현재 플레이어가 무음 상태인지 리턴 합니다.
toggleMute()	mute와 unMute 함수를 토글 합니다.
duration()	현재 영상의 총 길이를 리턴 합니다. (초단위)
currentTime()	영상의 현재 재생 위치를 리턴 합니다. (초단위)
getBuffering()
seekTo(value)	SEEKTO_MEDIA 이벤트를 발생시킵니다. (재생위치 변경, 초단위)
getVirtualCurrentTime(value)	value(초단위)에 대한
getVirtualSeekToValue(value)	value(초단위)에 대한
getDefaultPlaybackRate()
getPlaybackRate()	현재 배속을 리턴 합니다.
setPlaybackRate(value)	SET_PLAYBACK_RATE 이벤트를 발생시킵니다.
getAvailablePlaybackRates()	사용 가능한 배속 목록을 얻습니다.
resetRate()	배속을 초기화(1배속)으로 합니다. (setPlaybackRate 함수 호출)
nextRate()	SET_RATE 이벤트 발생. (현재 배속의 다음 배속으로 변경)
previousRate()	SET_RATE 이벤트 발생. (현재 배속의 이전 배속으로 변경)
getPlaybackQuality()	현재 선택된 화질 정보를 리턴 합니다.
setPlaybackQuality()	SET_PLAYBACK_QUALITY 이벤트 발생. 화질을 선택 합니다.
getAvailableQualityLevels()	사용 가능한 화질 목록을 얻습니다.
getAvailableSubtitles()	사용 가능한 자막 목록을 얻습니다.
getPlaybackSubtitle()	현재 선택된 자막 정보를 리턴 합니다.
setPlaybackSubtitle(value)	SET_PLAYBACK_SUBTITLE 이벤트를 발생시킵니다. (자막을 선택 합니다.)
fullscreen()	SET_FULLSCREEN 이벤트를 발생시킵니다.
exitFullscreen()	EXIT_FULLSCREEN 이벤트를 발생시킵니다.
toggleFullscreen()	fullscreen/exitFullscreen을 토글 합니다.
isFullscreen()	풀스크린 유무를 얻습니다.
getVideoSize()	재생중인 영상의 크기를 리턴 합니다.
source(source)	소스정보를 설정하고 CURRENT_MEDIA 이벤트를 발생시킵니다.
isVR()	유튜브 플레이어에서 영상의 VR 유무를 얻습니다.
isLive()	현재 영상의 생방송 유무를 얻습니다. (설정에서 isLive 속성을 가지고 판단)
isDVR()	현재 영상이 seek가능한 생방송인지 유무를 얻습니다. (설정에서 isDVR 속성을 가지고 판단)
isReady()	플레이어의 준비상태 유무를 얻습니다.
destroy()	플레이어를 제거 합니다. (엘리먼트를 제거하는 것은 아닙니다.)
log(string)	콘솔에 로그를 작성 합니다.
warn(string)	콘솔에 경고 로그를 작성 합니다.
error(string)	콘솔에 에러 로그를 작성 합니다.
isNativePlayer()	네이티브 플레이어로의 동작 유무를 리턴 합니다. (iOS, android 기본플레이어에서 동작유무)
click()	CLICK_EVENT 이벤트를 발생시킵니다.
displayControl()	CONTROL_EVENT 이벤트를 발생시킵니다.
addMenu(module)	메뉴 모듈을 등록 합니다.
removeMenu(module)	메뉴 모듈을 제거 합니다.
closeAllMenu()	모든 메뉴를 닫습니다.
getButton(id, className)	id에 대한 버튼을 얻습니다.

currentMediaSource

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.STATE_CHANGE){ if(e.data==this.STATE.SETSOURCE){ // 소스가 입력된 상태 var src = this.currentMediaSource(); // 사용자가 입력시 사용한 소스정보: src.input } } });

mediaSource

createMediaPlayer('#elementId', source, {}, function(e){ if(e.type==this.EVENT.STATE_CHANGE){ if(e.data==this.STATE.SETSOURCE){ // 소스가 입력된 상태 var src = this.mediaSource(); // src는 배열 입니다. } } });

자동재생

HTML5(Flash, IE브라우저 제외)에서 자동재생이 되지 않는 경우가 발생 할 수 있습니다.

url을 직접 입력하여 플레이어 페이지에 들어간 경우, 새로고침인 경우
(클릭을 통해 플레이어 페이지에 들어가야 합니다.)
재생 시작시 바로 소리가 나오는 경우
브라우저 설정에 자동 재생을 막은 경우
iOS에서 저전력 모드인 경우
로컬파일로 로딩된 경우 (로컬파일에서 클릭으로 URL페이지 이동시에도 자동재생 되지 않습니다.)

플래시 모드

배속기능을 지원하지 않습니다.
flash로 동작 중 화질(품질)변경 시 일시 정지 됩니다. (play버튼 등을 통해 이어서 재생 됩니다.)
고급설정의 플래시 설정을 꼭 참조 하셔야 합니다.
(플래시 설정)

Fullscreen

Fullscreen을 지원하지 않는 경우는 아래와 같습니다.

IE, iOS에서는 fullscreen을 지원하지 않습니다.
사용자의 클릭 이벤트 없이 fullscreen을 시도하는 경우 fullscreen이 허용되지 않습니다.

이러한 fullscreen을 지원하지 않는 경우를 대비하여 플레이어에서는 fullscreen 처럼 보이도록 브라우저의 크기로 fullscreen이 되도록 합니다. 이 때 플레이어 웹페이지의 html/css 등에 따라 fullscreen이 비정상적으로 보일 수 있습니다. 이러한 문제를 해결 할 책임은 플레이어를 사용하는 고객사에게 있지만 본 플레이어에서는 몇가지 해결책을 지원하고 있습니다. 이에 대한 해결책은 size 모듈의 fullscreen 관련 속성에 있습니다.

(size 모듈을 참조하세요.)

만약 size모듈의 fullscreen 속성을 사용하여도 해결되지 않는 경우가 생길 수 있습니다. 이러한 경우에는 고객사에서 수작업으로 비정상적인 화면을 수정하셔야 합니다. 그 방법은

아래

와 같습니다. createMediaPlayer 콜백함수에서 e.type이 FULLSCREEN_CHANGE 이벤트인 경우 e.data를 참고하여 fullscreen 혹은 exit fullscreen에서 해야 할 코드를 작성 합니다.

[코드 J-1]

var player = window.createMediaPlayer('#mediaplayer', source, {}, function(e){ if(e.type==this.EVENT.FULLSCREEN_CHANGE){ if(e.data){ // fullscreen 에서 작업해야 할 코딩 영역 입니다. }else{ // exit fullscreen 에서 작업해야 할 코딩 영역 입니다. } } });

자막 크로스 도메인 문제

자막이 player와 다른 도메인에 존재 할 경우 cross domain 문제를 만나게 됩니다. 특히 ie9 이하에서 cross domain 문제를 만날 경우 해결 하기 쉽지 않습니다. 이 부분은 고객사에서 player와 동일한 도메인에서 자막을 출력하는 중계 웹페이지를 만들어야 합니다.
예를 들어 기존에는 아래와 같이 자막을 설정했다면
subtitle : [{ src: ‘자막-도메인-url.smi’ } ]
에서
subtitle : [{ src: ‘player-도메인-url.php.jsp?url=자막url’ } ]
과 같이 중계 웹페이지에서 자막을 출력 합니다.
다만 위와 같이 한 경우 player가 자막 parsing 방법을 찾지 못하는 경우를 위해 아래와 같이 parser를 추가 해 주셔야 합니다.
subtitle : [{ src: ‘player-도메인-url.php.jsp?url=자막url’ , parser: 'imgtech.media.SMI' } ]

자막 parser에는 아래와 같이 3가지가 존재 합니다.

확장자	패키지네임
smi	imgtech.media.SMI
srt	imgtech.media.SRTParser
vtt	imgtech.media.SimpleVTTParser
vtt	imgtech.media.MozillaVTT (이 parser는 브라우저가 WebVTT를 지원해야 합니다.)

IE10 이상, html5 지원 브라우저에서 cross domain 문제
- 서버설정에
  - 아파치의 경우:
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "contenttype"
    </IfModule>
  - 자바소스의 경우:
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "contenttype");
  와 같이 설정해야 합니다.
  다만 content type을 사용 하지 않을 경우 content type을 생략해도 됩니다.
- 2.3.50.350 버전 이후 player에서 자막을 가져 올 때 ContentType등을 아래와 같이 사용자가 수정 할 수 있습니다.
  subtitle: {
  ajax: { headers: {'ContentType': 'application/x-www-form-urlencoded; charset=utf-8'} }
  }

IE9 콘솔 로그 문제

ie9 이하에서 console.log 및 console.error 등을 사용해서는 안됩니다. 저희 샘플페이지에 console.log/error 등이 존재 할 수 있으나 고객사에서 적용 시 제거 해야 합니다. console 객체는 테스트시에만 사용해야 합니다.

학습시간모듈 beforeunload 문제

이 beforeunload는 window의 beforeunload, firefox의 경우 window의 unload 이벤트를 사용 한 것 입니다. 그렇기 때문에 이 이벤트는 브라우저에 따라 호출 되지 않을 수 있습니다.

아래는 브라우저에 따른 ajax 통신의 크로스 도메인 문제를 정리 한 것 입니다.

브라우저	설명
ie7/ie8/ie9	cross domain 제외 ajax 통신 가능 합니다.
ie10/ie11	cross domain 포함 ajax 통신 가능 합니다.
Edge	cross domain 포함 ajax 통신 가능 합니다.
크롬	cross domain 포함 ajax 통신 가능 합니다.
firefox	beforeunload 호출 되지만 ajax 및 window.open 사용 할 수 없습니다.
safari	호출되지 않는 것으로 판단됩니다.

[플레이어 A-1]

와

[코드 A-1]

을 참조 하세요.

영상만 나오고 모든 UI가 없는 그리고 불필요한 엘리먼트 역시 존재하지 않고 기본적인 기능(배속,화질,자막 등)도 없는 순수한 플레이어를 의미 합니다. 이러한 플레이어를 만들기 위한 섹션 입니다.

이러한 플레이어를 만들기 위해서는 catvod.js파일을 수정 할 필요가 있습니다. catvod.js파일을 복사하여 catvod_005.js를 만들어 manual/example 폴더에 넣었습니다.

아래

는 영상만 존재하는 플레이어이며, 재생전에 무음으로 만들고 mouseover시 재생되고, mouseout시 일시정지되는 플레이어 입니다.

[플레이어 I-1]

아래

는 위

[플레이어 I-1]

의 소스 코드 입니다.

[코드 I-1]

아래

는

[플레이어 I-1]

의 catvod_005.js 일부 코드 입니다.

[코드 I-1-1]

에서 모듈 설정 영역에서 중요부분만 제외 하고 모두 제거 하였고, HTML 영역에서도 중요부분(영상과 플래시 다운로드 영역)만 제외 하고 모두 제거 한 코드 입니다. 이 두 곳(모듈과 HTML)을 제외하고는 기존과 동일한 가장 푸어(간단한) 플레이어 입니다.

[코드 I-1-1]

에서 모듈에 false를 넣은 것은 해당 모듈을 제거 한것과 같습니다. (전자제품의 전원을 뺀것과 같습니다.)

IMGTech

(function(){
    'use strict';
    // (생략 되었습니다)
    window.createMediaPlayer = function(id, source, param, callback) {
        return createOriginalMediaPlayer(id, source, param, callback);
    };

function cp(a, b){
        // (생략 되었습니다)
    }

function createOriginalMediaPlayer(id, source, param, callback){
        if( !param ) param = {};

var D = window.getDframework(),
            Media = D.module('imgtech.media.Media');
        // (생략 되었습니다)
        var attr = {
            // (생략 되었습니다)
            playerType: '',
            skin: SKIN_NAME,
            resourceText: '',
            src: source,
            width: '100%',
            height: '100%',
            autoplay: true,
            crossOrigin: 'anonymous',
            isPseudo: false,
            module: {
                layout: {
                    // (생략 되었습니다)
                },
                // (생략 되었습니다)
                watermark: {
                    // (생략 되었습니다)
                }
                // (생략 되었습니다)
            },
            // (생략 되었습니다)
        };

cp(attr, param);
        // (생략 되었습니다)
        attr.resourceText = getHtmlResource(attr);
        return Media.createPlayer(id, attr, true);
    }

function getHtmlResource(param){
        var h = [];
        h.push("<div class='mpv-player'>\n");
        h.push("  <div class='mpv-device mpv-screen'></div>\n");
            // (생략 되었습니다)
        h.push("  <div class='mpv-bottom mpv-zindex'>\n");
        h.push("    <div class='mpv-subtitle-display'></div>\n");
        h.push("    <div class='mpv-control'>\n");
        h.push("      <div class='mpv-progress mpv-zindex'>\n");
            // (생략 되었습니다)
        h.push("      </div>\n\n");
        h.push("      <div class='mpv-control-bottom mpv-ie8bg'>\n");
        h.push("        <div class='mpv-toggle-btn mpv-button mpv-bctrl-btn' ></div>\n");
        h.push("        <div class='mpv-stop-btn mpv-button mpv-bctrl-btn' ></div>\n");
        h.push("        <div class='mpv-previous-btn mpv-button mpv-bctrl-btn' ></div>\n");
        h.push("        <div class='mpv-next-btn mpv-button mpv-bctrl-btn' ></div>\n");
        h.push("        <div class='mpv-previous-skip-btn mpv-button mpv-bctrl-btn' ></div>\n");
        h.push("        <input type='input' class='mpv-skip-input mpv-bctrl-btn' value=''/>\n");
        h.push("        <div class='mpv-next-skip-btn mpv-button mpv-bctrl-btn'  ></div>\n");
        h.push("        <div class='mpv-repeat-btn mpv-repeat-off mpv-button mpv-bctrl-btn' ></div>\n");
        h.push("        <div class='mpv-volume-layout'>\n");
            // (생략 되었습니다)
        h.push("        </div>\n");
        h.push("        <div class='mpv-time-layout'>\n");
        h.push("          <div class='mpv-currenttime-text mpv-bctrl-btn'>0:00</div>\n");
        h.push("          <div class='mpv-duration-text mpv-bctrl-btn'>0:00</div>\n");
        h.push("        </div>\n");
        h.push("        <div class='mpv-fullscreen-btn mpv-button mpv-bctrl-btn' ></div>\n");
        h.push("        <div class='mpv-wide-btn mpv-button mpv-bctrl-btn mpv-sel0' ></div>\n");
        h.push("        <div class='mpv-openlayer-btn mpv-button mpv-bctrl-btn mpv-sel0' ></div>\n");
            // (생략 되었습니다)
        h.push("      </div>\n\n");
        h.push("    </div>\n");
        h.push("  </div>\n");        
        h.push("  <div class='mpv-foreground mpv-zindex'>\n");
            // (생략 되었습니다)
        h.push("  </div>\n");
            // (생략 되었습니다)
        h.push("</div>\n");
        return h.join('');
    }
})();

function getHtmlResource(param){
    var h = [];
    h.push("<div class='mpv-player'>\n");
    h.push("  <div class='mpv-device mpv-screen'></div>\n");
        // (생략 되었습니다)
    h.push("  <div class='mpv-bottom mpv-zindex'>\n");
    h.push("    <div class='mpv-subtitle-display'></div>\n");
    h.push("    <div class='mpv-control'>\n");
    h.push("      <div class='mpv-progress mpv-zindex'>\n");
        // (생략 되었습니다)
    h.push("      </div>\n\n");
    h.push("      <div class='mpv-control-bottom mpv-ie8bg'>\n");
    h.push("        <div class='mpv-toggle-btn mpv-button mpv-bctrl-btn' ></div>\n");
    h.push("        <div class='mpv-stop-btn mpv-button mpv-bctrl-btn' ></div>\n");
    h.push("        <div class='mpv-previous-btn mpv-button mpv-bctrl-btn' ></div>\n");
    h.push("        <div class='mpv-next-btn mpv-button mpv-bctrl-btn' ></div>\n");
    h.push("        <div class='mpv-previous-skip-btn mpv-button mpv-bctrl-btn' ></div>\n");
    h.push("        <input type='input' class='mpv-skip-input mpv-bctrl-btn' value=''/>\n");
    h.push("        <div class='mpv-next-skip-btn mpv-button mpv-bctrl-btn'  ></div>\n");
    h.push("        <div class='mpv-repeat-btn mpv-repeat-off mpv-button mpv-bctrl-btn' ></div>\n");
    h.push("        <div class='mpv-volume-layout'>\n");
        // (생략 되었습니다)
    h.push("        </div>\n");
    h.push("        <div class='mpv-time-layout'>\n");
    h.push("          <div class='mpv-currenttime-text mpv-bctrl-btn'>0:00</div>\n");
    h.push("          <div class='mpv-duration-text mpv-bctrl-btn'>0:00</div>\n");
    h.push("        </div>\n");
    h.push("        <div class='mpv-fullscreen-btn mpv-button mpv-bctrl-btn' ></div>\n");
    h.push("        <div class='mpv-wide-btn mpv-button mpv-bctrl-btn mpv-sel0' ></div>\n");
    h.push("        <div class='mpv-openlayer-btn mpv-button mpv-bctrl-btn mpv-sel0' ></div>\n");
        // (생략 되었습니다)
    h.push("      </div>\n\n");
    h.push("    </div>\n");
    h.push("  </div>\n");        
    h.push("  <div class='mpv-foreground mpv-zindex'>\n");
        // (생략 되었습니다)
    h.push("  </div>\n");
        // (생략 되었습니다)
    h.push("</div>\n");
    return h.join('');
}

createMediaPlayer('#mediaplayer', {
    src: 'http://도메인/1.mp4'
    , isLive: false
    , isDVR: false
    , continueTime: 20
    , autoContinueTime: 20
    , virtualTime: { start: 60, end: 120 }
    , progressTime: false
    , introTime: false
    , thumbnail: true
    // , quality: []
    // , subtitle: []
    // , bookmark: {}
    // , repmark: ()
    // , switchSource: []
    , autoHeight: true
    , autoHeightResizeable: true
    , title: ''
    , repeatWatchTimeSeekable: false
    , poster: ''
    , mute: false
    , disableSeekable: false
    , disableSeekToFirst: false
    , preview: {
        data: [
            {start: 0, end: 5}
            ,{start: 10, end: 15}
        ]
    }
    , ad: {
        start: [{
            src: 'http://html5.imgtech.co.kr/static/video/ebse.mp4'
            , virtualTime: {start: 10, end: 23}
            , url: 'https://www.youtube.com/watch?v=yTEYG2RPqok'
            , skipTime: 6
            , detailTime: 3
        }]
        , end: [{
            src: 'http://html5.imgtech.co.kr/static/video/ebse.mp4'
            , virtualTime: {start: 20, end: 33}
            , url: 'https://www.youtube.com/watch?v=urQC9QxH2_8'
        }]
        , middle: [{
            src: 'yt://iwHDiHs_KDo'
            , virtualTime: {start: 10, end: 23}
            , adTime: 30
            , url: 'https://www.youtube.com/watch?v=6-keZLwzzz8&t=446s'
        }]
    }
    , vast: {
        start: {
            size: 1
        },
        middle: {
            times: [{
                    time: 10
                }, {
                    time: 20
                }
            ]
        },
        end: {
            size: 1
        }
    }
    , radio: {
        hideScreen: false // or true
        , backgroundImage: 'http://m.imgtech.co.kr/html5/thumbs/thumb.png'
    }
});

/* 라이브 모드 */
    .skin-catvod.mpv-live-screen .mpv-thumbnail { display: none; }
    .skin-catvod.mpv-live-screen .mpv-stop-btn { display: none; }
    .skin-catvod.mpv-live-screen .mpv-rate-layout { display: none; }
    .skin-catvod.mpv-live-screen .mpv-repeat-btn { display: none; }
    .skin-catvod.mpv-live-screen .mpv-skip-input { display: none; }
    .skin-catvod.mpv-live-screen .mpv-previous-skip-btn { display: none; }
    .skin-catvod.mpv-live-screen .mpv-next-skip-btn { display: none; }
    .skin-catvod.mpv-live-screen .mpv-bookmark-layout  { display: none; }
    .skin-catvod.mpv-live-screen .mpv-bookmark-add-btn  { display: none; }
    .skin-catvod.mpv-live-screen .mpv-bookmark-menu-btn  { display: none; }
    .skin-catvod.mpv-live-screen .mpv-bookmark-menu { display: none; }    
    .skin-catvod.mpv-live-screen .mpv-repmark-layout  { display: none; }
    .skin-catvod.mpv-live-screen .mpv-repmark-add-btn  { display: none; }
    .skin-catvod.mpv-live-screen .mpv-repmark-menu-btn  { display: none; }
    .skin-catvod.mpv-live-screen .mpv-repmark-menu { display: none; }
    .skin-catvod.mpv-live-screen .mpv-time-layout { display: none; }
    .skin-catvod.mpv-live-screen .mpv-subtitle-layout { display: none; }
    .skin-catvod.mpv-live-screen .mpv-subtitle-display { display: none; }
    .skin-catvod.mpv-live-screen .mpv-progress { display: none; }

var attr = {
    // (생략하였습니다.)
    module: {
        continueTime: {
            // (생략하였습니다.)
        },
        layout: {
            // (생략하였습니다.)
        },
        volume: {
            // (생략하였습니다.)
        },
        size: {
            // (생략하였습니다.)
        },
        wide: {
            className: 'imgtech.media.module.Wide',
            // (생략하였습니다.)
        },
        progress: {
            // (생략하였습니다.)
        },
        ui: {
            // (생략하였습니다.)
        },
        repeat: {
            className: 'imgtech.media.module.Repeat',
            // (생략하였습니다.)
        },
        key: {
            className: 'imgtech.media.module.Key',
            // (생략하였습니다.)
        },
        subtitle: {
            className: 'imgtech.media.module.Subtitle',
            // (생략하였습니다.)
        },
        quality: {
            className: 'imgtech.media.module.Quality',
            // (생략하였습니다.)
        },
        rate: {
            // (생략하였습니다.)
        },
        bookmark: { // 책갈피 북마크 모듈
            className: 'imgtech.media.module.Bookmark'
            // (생략하였습니다.)
        },
        repmark: { // 구간반복 북마크 모듈
            className: 'imgtech.media.module.Repmark'
            // (생략하였습니다.)
        },
        playlist: {
            // (생략하였습니다.)
        },
        switchSource: {
            // (생략하였습니다.)
        },
        config: {
            className: 'imgtech.media.module.Config',
            // (생략하였습니다.)
        },
        watchTime: {
            className: 'imgtech.media.module.WatchTime',
            // (생략하였습니다.)
        },
        thumbnail: {
            className : "imgtech.media.module.Thumbnail",
            // (생략하였습니다.)
        },
        openLayer: {
            className: 'imgtech.media.module.OpenLayer',
            // (생략하였습니다.)
        },
        watermark: {
            className: "imgtech.media.module.Watermark",
            // (생략하였습니다.)
        },
        app: {
            // (생략하였습니다.)
        },
        ad: {
            // (생략하였습니다.)
        },
        version: {
            // (생략하였습니다.)
        }
    }
    // (생략하였습니다.)
};

layout = {
    controlAutoHide: 3.0
    , controlAutoHidePause: false
    , controlAutoHideFirst: false
    , controlAutoHideOver: false
    , separateControlNormal: false
    , separateControlFs: false
    , alwaysControlNormal: false
    , alwaysControlFs: false
    , controlHideMouseOut: true // 마우스가 벗어나면 컨트롤이 사라지도록 합니다. (모바일이 아닌 경우)
    , isShowControl: function(){ return getDframework().b.isMobile || this.p.module('app').isMobileApp(); }
    , isAnimationControl: true
    , touch: {
        useType: 'always' // none, always, fullscreen (only fullscreen)
        , mobile: {
            useType: 'fullscreen'  // none, always, fullscreen (only fullscreen)
        }
        , message: {
            S_PROGRESS: '재생위치'
            , S_VOLUME: '볼륨'
            , S_BRIGHTNESS: '밝기'
        }
    }
    , disableToggle: false
    , playMouseOver: false
    , pauseMouseOut: false
    , disableToggleOSD: false
    , lockBtn: {hideExtendButton: false}
    , osdLoadingBtn: {hideExtendButton: false}
    , osdToggleBtn: {hideExtendButton: false}
    , clickTime: 300
    , sideDoubleTab: {
        use: true,
        useApple: false, // 이것은 더 이상 사용하지 않습니다.(3.1.41)
        useDoubleClickOnclickTime: false,
        ignoreFullscreen: false,
        helperUnitText: ' 초',
        helperHideTimer: 1.0,  // 사이드에 더블탭시 시크되는 UI가 표시될 때 자동으로 감춰질 시간 (초단위) 입니다. 기본값은 1.0 입니다.
        progressHelperTimer: 2 // 프로그래스바를 클릭시 sideDoubleTab 설명 UI를 표시합니다. 이 때 자동으로 감춰질 시간 (초단위) 입니다.
                                // 이 시간이 0이면 설명 UI는 표시 하지 않습니다.
    }
}

rate = {
    use: true,
    useType: 'list', // button(mpv-rate-type-button) or list(mpv-rate-type-list). 버튼 타입이 아니면 리스트 타입 입니다.
    rateBtn: {hideButton: false, hideExtendButton: true, hideMenuButton: true},
    rateDownBtn: {hideButton: false, hideExtendButton: true, hideMenuButton: true},
    rateUpBtn: {hideButton: false, hideExtendButton: true, hideMenuButton: true},
    rateText: {hideButton: false, hideExtendButton: true, hideMenuButton: true},
    rateInfo: [
        { 'value': 0.4, 'context': "0.4 배속", 'cvalue': "0.4 배속" },
        { 'value': 0.6, 'context': "0.6 배속", 'cvalue': "0.6 배속" },
        { 'value': 0.8, 'context': "0.8 배속", 'cvalue': "0.8 배속" },
        { 'value': 1,   'context': "1.0 배속", 'cvalue': "일반배속" },
        { 'value': 1.2, 'context': "1.2 배속", 'cvalue': "1.2 배속" },
        { 'value': 1.4, 'context': "1.4 배속", 'cvalue': "1.4 배속" },
        { 'value': 1.6, 'context': "1.6 배속", 'cvalue': "1.6 배속" },
        { 'value': 1.8, 'context': "1.8 배속", 'cvalue': "1.8 배속" },
        { 'value': 2,   'context': "2.0 배속", 'cvalue': "2.0 배속" }
    ]
}

youtube = {
    quality: 'none',
    qualityLabel: [
        {code: 'hd2160', label:'4K 고해상도'},
        {code: 'hd1440', label:'2K 고해상도'},
        {code: 'hd1080', label:'Full HD'},
        {code: 'hd720', label:'HD'},
        {code: '480p', label:'large'},
        {code: '360p', label:'medium'},
        {code: '240p', label:'small'},
        {code: 'hd7auto20', label:'자동'},
    ],
    rateLabel: [
        {code: 0.25, label:'0.25 배속'},
        {code: 0.5,  label:'0.5 배속'},
        {code: 0.75, label:'0.75 배속'},
        {code: 1,    label:'일반 배속'},
        {code: 1.25, label:'1.25 배속'},
        {code: 1.5,  label:'1.5 배속'},
        {code: 1.75, label:'1.75 배속'},
        {code: 2,    label:'2 배속'}
    ],
    subtitle: 'all', // youtube, source, all, none
    autoLanguage: false, // 유튜브가 지원하는 자동 번역 자막 사용 유무 입니다. 지원하지 앟는 영상이 존재 합니다.
    useYoutubeOSD: true,
    playerVars: {
        enablejsapi: 1,
        cc_load_policy: 1,
        rel: 0,
        showinfo: 0,
        controls: 0,
        fs: 0
    },
    pauseImage: 'http://m.imgtech.co.kr/html5/thumbs/thumb.png',
    pauseImageTime: 3,
    width: 1280, height: 720 // Youtube 영상의 크기를 알 수 없어 여기에 지정
}

var D = window.getDframework(),
    Media = D.module('imgtech.media.Media'),
    E = Media.EVENT;
debug = {
    use: false,
    flash: false,
    startType: 'log',
    displaySource: false,
    displayType: false,
    displayClassName: 1,
    disable: [
        E.CLICK_EVENT
        // ,E.SUBTITLE_EVENT
        ,E.WAITTING
        ,E.DURATION_CHANGE
        ,E.CURRENT_TIME_CHANGE
        ,E.SEEKTO_MEDIA
        ,E.WATCH_TIME_CHANGE
        ,E.BUFFERING_CHANGE
        ,E.CONTROL_EVENT
        ,E.RESIZE_WINDOW
        ,E.SIZE_CHANGE
        ,E.OPENLAYER_CHANGE
        ,E.SET_VOLUME
        ,E.VOLUME_CHANGE
        ,E.MUTE_MEDIA
        //,E.CAN_PLAY
        ,'repeat-change-min'
        ,'repeat-change-max'
        ,'repeat-depth_seconds_2'
    ],
    special: [
        //E.VOLUME_CHANGE
        //,E.OPENLAYER_CHANGE
        //,E.SEEKTO_MEDIA
        //,E.CAN_PLAY
        //,E.WAITTING
        //,E.SIZE_CHANGE
        //,E.FULLSCREEN_CHANGE
        //,E.CLICK_EVENT
    ],
    element: '#zonehtml5mediaplayer_debuger',
    url: ''
}

/* 볼륨 버튼 및 볼륨 영역 */
.skin-catvod .mpv-volume-layout { float: left; }
.skin-catvod .mpv-volume-layout .mpv-mute-toggle-btn { background-image: url(../../image/catvod/volume_up.png); /*생략*/ }
.skin-catvod .mpv-volume-layout .mpv-mute-toggle-btn.mpv-muted { background-image: url(../../image/catvod/volume_off.png); }
.skin-catvod .mpv-volume-layout .mpv-volume-ground { display: inline-block; }
.skin-catvod .mpv-volume-layout .mpv-volume-foreground { background-color: #FFFFFF; width: 5px; }
.skin-catvod .mpv-volume-layout .mpv-volume-slider-layout.mpv-volume-disable { display: none; }
/* 세로 볼륨 형식 */
    .skin-catvod .mpv-volume-layout.mpv-up-vertical .mpv-volume-slider-layout { position: absolute; width: 32px; /*생략*/ }
    .skin-catvod .mpv-volume-layout.mpv-up-vertical .mpv-volume-slider-layout.mpv-hide { display: block; /*생략*/ }
    .skin-catvod .mpv-volume-layout.mpv-up-vertical .mpv-volume-slider { position: relative; /* ... 생략 ... */ }
    .skin-catvod .mpv-volume-layout.mpv-up-vertical .mpv-volume-background { position: relative; /* ... 생략 ... */ }
    .skin-catvod .mpv-volume-layout.mpv-up-vertical .mpv-volume-foreground { position: absolute; /* ... 생략 ... */ }
    .skin-catvod .mpv-volume-layout.mpv-up-vertical .mpv-volume-handler { position: absolute; display: block; /*생략*/ }
/* 가로 볼륨 형식 */
    .skin-catvod .mpv-volume-layout.mpv-horizontal .mpv-mute-toggle-btn { float: left; }
    .skin-catvod .mpv-volume-layout.mpv-horizontal .mpv-volume-slider-layout { float: right; width: 60px; /*생략*/ }
    .skin-catvod .mpv-volume-layout.mpv-horizontal .mpv-volume-slider-layout.mpv-hide { display: none; }
    .skin-catvod .mpv-volume-layout.mpv-horizontal .mpv-volume-background { position: relative; /* ... 생략 ... */ } 
    .skin-catvod .mpv-volume-layout.mpv-horizontal .mpv-volume-foreground { position: relative; /* ... 생략 ... */ } 
    .skin-catvod .mpv-volume-layout.mpv-horizontal .mpv-volume-handler { position: absolute; display: block; /*생략*/ }

<div style='width: 400px; height: 226px;'>
    <div id='mediaplayer-playlista'></div>
</div>
<script>
    (function(){
        createMediaPlayer('#mediaplayer-playlista', [
            {
                src: 'http://html5.imgtech.co.kr/static/video/ebse.mp4'
            },
            {
                src: 'yt://iwHDiHs_KDo',
                virtualTime: {start: 1, end: 168}
            },
            {
                src: 'http://html5.imgtech.co.kr/static/video/sbs1.mp4',
                virtualTime: {start: 32*60, end: 32*60+168}
            }
        ], { module: {
                repeat: { repeatBtn: { hideButton: true } },
                rate: { rateBtn: {hideButton: true } },
                progress: { previousSkipBtn: { hideButton: true }, nextSkipBtn: {hideButton: true} },
                playlist: { 
                    previousBtn: {hideButton: false},
                    nextBtn: {hideButton: false},
                    menuBtn: {hideButton: false },
                    closeOnClick: false
                }
        }}, function(e){
            if(e.type==this.EVENT.ON_BEFORE_ONCE_PLAY){
                this.module('playlist').openMenu();
            }
        });
    })();
</script>

<div style='width: 400px; height: 226px;'>
    <div id='mediaplayer-switchsourcea'></div>
</div>
<script>
    (function(){
        createMediaPlayer('#mediaplayer-switchsourcea', {
            switchSource: [
                {
                    playerName: 'Youtube'
                    , src: 'yt://iwHDiHs_KDo'
                    , patchClassName: 'youtube'
                    , select: true
                },{
                    playerName: 'Video'
                    , src: 'http://html5.imgtech.co.kr/static/video/sbs1.mp4'
                    , patchClassName: 'noyoutube'
                    , virtualTime: { start: 33*60, end: 33*60+190 }
                }
            ]
        }, { module: {
                repeat: { repeatBtn: { hideButton: true } },
                rate: { rateBtn: {hideButton: true } },
                switchSource: { switchSourceBtn: {hideButton: false}, closeOnClick: false}
        }}, function(e){
            if(e.type==this.EVENT.ON_BEFORE_ONCE_PLAY){
                this.module('switchSource').openMenu();
            }
        });
    })();
</script>

<div style='width: 600px; height: 340px;'>
    <div id='mediaplayer-switchsourceb'></div>
</div>
<script>
    (function(){
        createMediaPlayer('#mediaplayer-switchsourceb', [
            {
                name: '첫번째 음악'
                , src: 'yt://iwHDiHs_KDo'
            },
            {
                name: '두번째 음악'
                , switchSource: [
                    {
                        playerName: 'Youtube'
                        , src: 'yt://iwHDiHs_KDo'
                        , patchClassName: 'youtube'
                    },{
                        playerName: 'Video'
                        , src: 'http://html5.imgtech.co.kr/static/video/sbs1.mp4'
                        , patchClassName: 'noyoutube'
                        , virtualTime: { start: 33*60, end: 33*60+190 }
                        , select: true
                    }
                ]
            }
        ], { module: {
                repeat: { repeatBtn: { hideButton: true } },
                rate: { rateBtn: {hideButton: true } },
                progress: { previousSkipBtn: { hideButton: true }, nextSkipBtn: {hideButton: true} },
                switchSource: { switchSourceBtn: {hideButton: false}},
                playlist: { 
                    previousBtn: {hideButton: false},
                    nextBtn: {hideButton: false},
                    menuBtn: {hideButton: false }
                }
        }}, function(e){
            
        });
    })();
</script>

<div style='width: 400px; height: 226px;'>
    <div id='mediaplayer-progressa'></div>
</div>
<script>
    (function(){
        createMediaPlayer('#mediaplayer-progressa', {
            src: 'http://html5.imgtech.co.kr/static/video/ebse.mp4'
            , preview: {
                data: [
                    {start: 0, end: 5}
                    ,{start: 10, end: 15}
                ]
            }
        }, { module: {
                repeat: { repeatBtn: { hideButton: true } },
                rate: { rateBtn: {hideButton: true } },
                progress: {
                    previousSkipBtn: { hideButton: true },
                    nextSkipBtn: {hideButton: true},
                    preview: {
                        callback: function(method, data){
                            if(method=='end'){
                                var D = getDframework(),
                                    Confirm = D.module('imgtech.media.extends.Confirm'),
                                    confirm = new Confirm({player: this.p}),
                                    thiz = this;
                                confirm.show('구매완료 ??? ', function(e){
                                    if(e){
                                        thiz.unsetPreview(true); // true is play (구매가 완료되면 호출 합니다.)
                                    }
                                });
                            }
                        }
                    }
                }
        }});
    })();
</script>

ad = {
    className: 'imgtech.media.module.AD'
    , progressTime: true // true, 'disable', false
    , againAD: true
    , isEnableSkipAgainAd: false
    , isEnableDetailAgainAd: false
    , detailBtn: { hideEtcButton: true, click: undefined }
    , skipBtn: { hideEtcButton: false, click: undefined }
    , useYoutubeOSD: false
    , skipTime: 10
    , detailTime: 3
    , start: function(data, cb){
        if(!window.__adStart){
            cb({
                src: 'yt://pXUPoDub4Oc'
                , virtualTime: {start: 20, end: 33}
                , url: 'https://www.youtube.com/watch?v=Ey3GZ_ZNtVY'
            });
            window.__adStart = true;
        }else{
            cb(null);
        }
    }
    , end: function(data, cb){
        if(!window.__adEnd){
            cb({
                src: 'yt://pXUPoDub4Oc'
                , virtualTime: {start: 40, end: 53}
                , url: 'https://www.youtube.com/watch?v=Ey3GZ_ZNtVY'
            });
            window.__adEnd = true;
        }else{
            cb(null);
        }
    }
    , currentTime: function(data, currentTime, cb){
        if(!window.__adcurrentTime && currentTime>40){
            cb({
                src: 'yt://pXUPoDub4Oc'
                , virtualTime: {start: 40, end: 53}
                , url: 'https://www.youtube.com/watch?v=Ey3GZ_ZNtVY'
            });
            window.__adcurrentTime = true;
        }else{
            cb(null);
        }
    }
    , adStateChange: function(e){
        var limit = 10;
        if(e.type==this.p.EVENT.ON_BEFORE_PLAY){
            var src = this.p.currentMediaSource();
            if(!src.____userEnableSkip){
                D.text(this.__skipBtn.all, limit + '초 후 SKIP');
            }
        }else if(e.type==this.p.EVENT.CURRENT_TIME_CHANGE){
            var sec = Math.floor(e.data.currentTime),
                src = this.p.currentMediaSource();
            if(sec>=limit){
                if(!src.____userEnableSkip){
                    src.____userEnableSkip = true;
                    D.text(this.__skipBtn.all, 'SKIP >');
                }
            }else if(!src.____userEnableSkip){
                D.text(this.__skipBtn.all, (limit - sec) + '초 후 SKIP');
            }
        }
    }
    , clickLayout: function(src){
        if(src && src.input && src.input.url){
            if(src.input.url){
                this.p.pause();
                window.open(src.input.url);
            }
        }
    }
}