01. Index StarPlayer API Guide 01. Index 02. 상수값 정의 03. API 정의

Presentation on theme: "01. Index StarPlayer API Guide 01. Index 02. 상수값 정의 03. API 정의"— Presentation transcript:

1 01. Index StarPlayer API Guide 01. Index 02. 상수값 정의 03. API 정의
04. EVENT 정의 05. EXAMPLE StarPlayer API Guide

2 02. 상수값 정의 Constants 항목 및 설명 2 1- 순번 Constants 값 설명 1 OpenState.CLOSED
02. 상수값 정의 Constants 항목 및 설명 순번 Constants 값 설명 1 OpenState.CLOSED 미디어 연결 종료 2 OpenState.CLOSING 미디어 연결 종료중 3 OpenState.OPENING 미디어 연결중 4 OpenState.OPENED 미디어 연결 5 PlayState.STOPPED 재생 중지 6 PlayState.PLAYING 재생중 7 PlayState.PAUSED 일시중지 8 PlayState.BUFFERING_STARTED 버퍼링 시작 9 PlayState.BUFFERING_STOPPED 버퍼링 종료 10 PlayState.COMPLETE 재생완료 11 StarPlayerError.OPEN_FAILURE 연결 오류 12 StarPlayerError.INVALID_MEDIA_TYPE 비 정상적인 미디어 파일 13 WatermarkAlign.LEFT 워터마크의 위치(왼쪽) 14 WatermarkAlign.TOP 워터마크의 위치(윗쪽) 15 WatermarkAlign.CENTER 워터마크의 위치(가운데) 16 WatermarkAlign.RIGHT 워터마크의 위치(오른쪽) 17 WatermarkAlign.BOTTOM 워터마크의 위치(아래쪽) 18 WatermarkAlign.RANDOM 워터마크의 위치(랜덤하게) 2 1-

3 02. 상수값 정의 Example ] Enter key와 Space key를 눌렀을때 Constants 값에 따른 이벤트 처리를 예로 하였습니다. function onKeyDown(keycode) { if (window.event) { var type = window.event.srcElement.type; if (type == "text" || type == "textarea") return true; } switch (keycode) { case 13: // ENTER this.setFullscreen(true); break; case 32: // SPACE if (this.getPlayState() == PlayState.PLAYING) this.pause(); else this.play(); return false;

4 03. API 정의 StarPlayer(config, media) config: 플레이어 관련 설정
id: 스타플레이어의 tag id videoContainer: 비디오 출력 영역의 tag id controllerContainer: 컨트롤 출력 영역의 tag id visible: 플레이어 구동시 화면 보임 또는 숨김 설정 (true 또는 false) controllerUrl: 컨틀롤 UI 파일 경로 userId: 사용자 아이디 (로그인 사용자는 아이디로 설정, 비로그인 사용자는 ANONYMOUS로 설정) blockMessenger: 메신저 차단 기능 설정 (true 또는 false) watermarkText: 워터마킹할 문자 watermarkTextColor: 워터마크 색상 (#aarrggbb, aa = alpha, rr = red, gg = green, bb = blue) watermarkTextSize: 워터마트 크기 (n 또는 n%, 예: 20 = 20 pixel, 5% = 비디오 세로 크기의 5%에 해당하는 크기) watermarkHorzAlign: 워터마크 가로 출력 위치 (WatermarkAlign 참조) watermarkVertAlign: 워터마크 세로 출력 위치 (WatermarkAlign 참조) watermarkInterval: 워터마크 출력 위치가 RANDOM일 경우 위치 변경되는 시간 값 (단위 초) wartermarkShowInterval: 워터마크 출력 위치가 RANDOM일 경우에만 작동되며 워터마크를 보여 주는 시간 값 (단위 초) media: 재생 관련 설정 url: 미디어 파일 경로 cc: 자막 파일 경로 intro: 인트로 파일 경로 outro: 아웃트로 파일 경로 startTime: 시작 재생 위치 (단위 초, 실수) autoPlay: 시작시 자동 재생 설정 (true 또는 false, 기본 값: true)

5 03. API 정의 open(media) play( ) pause( ) stop( )
media: 상기 media 설명 참조 play( ) 재생 pause( ) 일시정지 stop( ) 정지 backward( ) / backward(time) 뒤로 이동 time: 이동할 시간값 (선택사항) * time을 지정하지 않으면 setStep에서 지정된 값을 사용 (기본값 30초) forward( ) / forward(time) 앞으로 이동

6 03. API 정의 getStep( ) setStep(time) getDuration( )
backward / forward 기본 시간 값 반환 return: 시간값 (초, 기본값 30초) setStep(time) backward / forward 기본 시간 값 설정 time: 시간값 (초) getDuration( ) 미디어의 전체 재생 시간 반환 return: 미디어의 전체 재생 시간 (초) getCurrentPosition( ) 미디어의 현재 재생 위치 반환 return: 미디어의 현재 재생 시간 (초) setCurrentPosition(time) 미디어의 현재 재생 위치 설정 time: 미디어의 재생 위치 (초)

7 03. API 정의 getVolume( ) setVolume(volume) getMute( ) setMute(mute)
현재 설정된 볼륨 값 반환, return: 볼륨 값 (0~1) setVolume(volume) 볼륨 값 설정, volume: 볼륨 값 (0~1) getMute( ) 볼륨의 음소거 상태 반환, return: true 또는 false setMute(mute) 볼륨의 음소거 상태 설정, mute: true 또는 false getFullscreen( ) 전체화면 상태 반환, return: true 또는 false setFullscreen(fullscreen) 전체화면 상태 설정, fullscreen: true 또는 false getRate( ) 현재 배속 값 반환, return: 배속 값 (0.5 ~ 2)

8 03. API 정의 setRate(rate) getRepeat( ) setRepeat(repeat)
재생 반복 상태 값 반환, return: true 또는 false setRepeat(repeat) 재생 반복 상태 값 설정, repeat: true 또는 false getRepeatStartTime( ) 반복 재생 시작 시간 값 반환, return: 시간 값 (초) setRepeatStartTime(time) 반복 재생 시작 시간 값 설정, time: 시간 값 (초) getRepeatEndTime( ) 반복 재생 종료 시간 값 반환, return: 시간 값 (초) setRepeatEndTime(time) 반복 재생 종료 시간 값 반환, time: 시간 값 (초)

9 03. API 정의 getTopmost( ) setTopmost(topmost) getPlayTime( )
최상위 설정 상태 반환, return: true 또는 false setTopmost(topmost) 최상위 설정 상태 설정, topmost: true 또는 false getPlayTime( ) 순수 재생된 시간값 반환 (버퍼링, PAUSE, STOP, 배속 등의 경우 제외) getOpenState( ) 미디어 오픈 상태 반환 return: OpenState.CLOSED, OpenState.CLOSING, OpenState.OPENING, OpenState.OPENED getPlayState( ) 재생 상태 반환 return: PlayState.STOPPED, PlayState.PLAYING, PlayState.PAUSED, PlayState.BUFFERING_STARTED, PlayState.BUFFERING_STOPPED setVisible(visible) 비디오 화면을 보임 또는 숨김, visible: true 또는 false getVideoWidth( ) 비디오 원본 크기 (가로), return: pixel

10 03. API 정의 getVideoHeight( ) getBrightness( ) setBrightness(value)
비디오 원본 크기 (세로), return: pixel getBrightness( ) 명도 값, return: -256 ~ 256 실수, 기본: 0 setBrightness(value) 명도 설정, value: -256 ~ 256 실수 getContrast( ) 대비 값, return: 0 ~ 2 실수, 기본: 1 setContrast(value) 대비 설정, value: 0 ~ 2 실수 getSaturation( ) 채도 값, return: 0 ~ 2 실수, 기본: 1 setSaturation(value) 채도 설정, value: 0 ~ 2 실수

11 03. API 정의 getHue( ) setHue(vlaue) getBlockMessenger( )
색조 값, return: -180 ~ 180 실수, 기본: 0 setHue(vlaue) 색조 설정, value: -180 ~ 180 실수 getBlockMessenger( ) 메신저 차단 기능 사용 여부 판단, return: true 또는 false setCaption(caption) 화면에 지정된 자막 출력, caption: 출력할 자막 문자열 clearCaption( ) 출력된 자막을 화면에서 지움 isIntroMovie( ) 현재 재생중인 동영상이 인트로인지 판별, return: true 또는 false isOutroMovie( ) 현재 재생중인 동영상이 아웃트로인지 판별, return: true 또는 false

12 04. EVENT 정의 onOpenStateChange(state) onPlayStateChange(state)
state: OpenState 참조 onPlayStateChange(state) state: PlayState 참조 onPositionChange(pos) seeking 동작으로 재생위치 변경 pos: 초 단위, 실수 onVolumeChange(volume, mute) 볼륨 변경 및 음소거 변경 volume: 0 ~ 1 실수 mute: true 또는 false onRateChange(rate) 배속 변경 rate: 0.5 ~ 2 실수 onRepeatChange(repeat) 구간반복 ON / OFF repeat: true 또는 false

13 04. EVENT 정의 onRepeatRangeChange(start, end) onKeyDown(keycode)
구간반복 구간 변경 start: 초 단위, 실수 end: 초 단위, 실수 onKeyDown(keycode) 키 다운 이벤트 keycode: 키코드 값 onKeyUp(keycode) 키 업 이벤트 onClick(x, y) 마우스 클릭 이벤트 x: 마우스 x 위치 y: 마우스 y 위치 onMouseDown(x, y) 마우스 다운 이벤트

14 04. EVENT 정의 onMouseUp(x, y) onMouseDbclick(x, y)
마우스 업 이벤트 x: 마우스 x 위치 y: 마우스 y 위치 onMouseDbclick(x, y) 마우스 더블클릭 이벤트 onMouseWheel(x, y, delta) 마우스 휠 이벤트 delta: wheel 이동 값 onFullscreen(fullscreen) 전체화면 변경 fullscreen: true 또는 false onError(errcode) 오류 발생, errcode: StarPlayerError 참조

15 05. EXAMPLE <head> <script type="text/javascript" src="js/starplayer_config.js"></script> <script type="text/javascript" src="js/starplayer.js"></script> <script type="text/javascript"> function onMouseDbclick(x, y) { this.setFullscreen(!this.getFullscreen()); } function onKeyDown(keycode) { if (window.event) { var type = window.event.srcElement.type; if (type == "text" || type == "textarea") return true; switch (keycode) { case 13: // ENTER this.setFullscreen(true); break; case 32: // SPACE if (this.getPlayState() == PlayState.PLAYING) this.pause(); else this.play(); return false;

16 05. EXAMPLE function onLoad() { var config = { userId: "ANONYMOUS",
id: "starplayer", videoContainer: "video-container", controllerContainer: "controller-container", controllerUrl: "StarPlayerUI.bin" }; var media = { url: " startTime: 0 var player = new StarPlayer(config, media); player.onKeyDown = onKeyDown; player.onMouseDbclick = onMouseDbclick; } </script> </head> <body onload="onLoad()"> <div id="player-container" style="width:720px;background-color:black;"> <div id="video-container" style="height:408px"></div> <div id="controller-container" style="height:67px"></div> </div> </body>

17 05. test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <script type="text/javascript"> function go(url, width, height) { window.open(encodeURI(url),'Vod','width=' + width + ',height=' + (height + 67) +',left=0,top=0'); } </script> <body> <a href="javascript:go('/starplayer/player.asp?url= 854, 480)">한석현</a> <form method="POST" action="/starplayer/player.asp" onsubmit="go('/starplayer/player.asp?url=' + this.url.value, 854, 480); return false;"> <table> <tr> <td>파일명:</td> <td><input name="url" type="text" size="50" /></td> <td><input type="submit" value="확인" /></td> </tr> </form> </body> </html>

18 05. Starplayer.asp <%@ language="javascript"%>
<!-- saved from url=(0013)about:internet --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript" src=" <script type="text/javascript" src="js/starplayer.js"></script> <script type="text/javascript"> function onMouseDbclick(x, y) { this.setFullscreen(!this.getFullscreen()); } function onKeyDown(keycode) { if (window.event) { var type = window.event.srcElement.type; if (type == "text" || type == "textarea") return true; switch (keycode) { case 13: // ENTER this.setFullscreen(true); break; case 32: // SPACE if (this.getPlayState() == PlayState.PLAYING) this.pause(); else this.play(); case 38: // UP this.setVolume(this.getVolume() + 0.1); case 40: // DOWN this.setVolume(this.getVolume() - 0.1);

19 05. Starplayer.asp case 37: // LEFT this.backward(); break;
case 39: // RIGHT this.forward(); case 190: // > this.setRate(this.getRate() + 0.2); case 188: // < this.setRate((this.getRate() - 0.2) < 0.6 ? 0.6 : (this.getRate() - 0.2)); case 77: // M this.setMute(!this.getMute()); case 82: // R this.setRepeat(!this.getRepeat()); default: return; } return false; function onLoad(){ var config = { userId: "ANONYMOUS", // 비로그인 사용자를 ‘ANONYMOUS’로 설정할경우 서버단에서 아이디 동접체크를 하지않음 id: "starplayer", videoContainer: "video-container", controllerContainer: "controller-container", controllerUrl: "StarPlayerUI.bin", watermarkText: "<%= Request.serverVariables('REMOTE_ADDR') %>", watermarkTextColor: "#40ffffff", watermarkTextSize: "5%", watermarkHorzAlign: WatermarkAlign.RANDOM, watermarkVertAlign: WatermarkAlign.RANDOM }; var media = {

20 05. Starplayer.asp url: "<%= Request.QueryString('url') %>",
intro: null, startTime: 0, blockMessenger: false }; var player = new StarPlayer(config, media); player.onKeyDown = onKeyDown; player.onMouseDbclick = onMouseDbclick; } </script> </head> <body style="margin: " onload="onLoad()" onkeydown="onKeyDown(event.keyCode)"> <div id="player-container" style="width:854px;background-color:black;"> <div id="video-container" style="height:480px"></div> <div id="controller-container" style="height:67px"></div> </div> </body> </html>