iframeAPI는 아래와 같이 세팅하여 사용하시면 됩니다.

제공된 js 파일을 import 합니다.

<script src=”//play.wecandeo.com/html/utils/iframeAPI.js”></script>

 

Setup

setup (parameter) Api 객체를 아래와 같이 설정 합니다.

var ifrm = document.getElementById(‘iframe element id’);
contents = ifrm.contentWindow || ifrm.contentDocument;
var api = new smIframeAPI(contents);

플레이어 이벤트에 대한 callBack 함수 등록 Event 참고

onEvent (smIframeEvent.REMOVE, callback) Web Page 에서 플레이어를 제거시 콜백 함수가 실행 됩니다.
onEvent (smIframeEvent.READY, callback) 플레이어 준비 완료 시 콜백 함수가 실행 됩니다.

Playback

getState() 플레이어 상태 값이 반환 됩니다.
Returns String
– VALUE : idle , playing , pause , buffering
play() 영상 재생을 시작 합니다.
pause() 영상 일시정지가 됩니다.
stop() 영상 재생을 멈추고 Idle 화면으로 전환 합니다.
onEvent (smIframeEvent.PAUSE, callback) 영상이 일시정지 되면 콜백 함수가 실행 됩니다.
onEvent (smIframeEvent.BUFFERING, callback) 영상 재생 중 버퍼링 시 콜백 함수가 실행 됩니다.
onEvent (smIframeEvent.IDLE, callback) 플레이어가 초기화면으로 전환 될 때 콜백 함수가 실행 됩니다.
onEvent (smIframeEvent.COMPLETE, callback) 영상 재생이 완료 되면 콜백 함수가 실행 됩니다.
onEvent (smIframeEvent.ERROR, callback) 플레이어 오류 발생 시 콜백 함수가 실행 됩니다.

Seek

onEvent (smIframeEvent.SEEKED, callback) 영상 재생 위치 변경시 콜백 함수가 실행됩니다.
Returns Object
– seeking : Boolean
– time : Number
getPosition() 현재 재생 시간이 반환 됩니다.
Returns Number
getDuration() 영상 전체 시간이 반환 됩니다.
Returns Number
onEvent (smIframeEvent.TIME, callback) 초당 10번의 이벤트가 발생 됩니다.
Returns Object
– position : Number
– duration : Number

Volmue

setMuted (value) 음소거 상태를 변경 합니다 ( true / false )
getMuted() 음소거 상태가 반환 됩니다.
Returns Boolean
setVolume (value) 볼륨 값을 변경 합니다. (0 ~ 100)
getVolume() 볼륨 값이 반환 됩니다.
Returns Number
– VALUE : (0 ~ 100)
onEvent (smIframeEvent.VOLUME, callback) 볼륨 변경시 콜백 함수가 실행됩니다.
Returns Object
– volume : Number
– muted : Boolean

Resize

onEvent (smIframeEvent.RESIZE, callback) 플레이어 사이즈 변경시 콜백 함수가 실행됩니다.
Returns Object
– width : Int
– height : Int
onEvent (smIframeEvent.FULLSCREEN, callback) 플레이어 화면이 전체화면 or 기본화면 으로 전환 될 때 콜백 함수가 실행됩니다.
Returns Boolean
getFullscreen() 전체화면에 대한 상태 값이 반환 됩니다.
Returns Boolean
getWidth() 플레이어 폭 값이 반환 됩니다.
Returns Number
getHeight() 플레이어 높이 값이 반환 됩니다.
Returns Number

Event

onEvent (type, callback) 플레이어 이벤트 callBack 함수 등록
Ex) api.onEvent( smIframeEvent.VIDEO_PLAY , function(){
// 영상 재생이 시작 되었습니다.
});

smIframeEvent (Event Type)

IDLE 대기 화면
VIDEO_READY 재생 준비 완료
VIDEO_PLAY 재생 시작
VIDEO_PAUSE 일시 정지
VIDEO_BUFFERING 버퍼링
VIDEO_COMPLETE 재생 완료
VIDEO_SEEK 구간 이동 시작
VIDEO_SEEKED 구간 이동 완료
VIDEO_VOLUME 볼륨 변경
VIDEO_FULLSCREEN 전체화면 모드 전환
TIME 재생 시간
RESIZE 플레이어 사이즈 변경
REMOVE 플레이어 삭제
ERROR 플레이어 에러

Sample Code

 <script src = “//play.wecandeo.com/html/utils/iframeAPI.js”></script>

<script>

var iframeAPI;
window.onload = function(){
var iframe = document.getElementById(‘iframe element id’);
contents = iframe.contentWindow || iframe.contentDocument;
iframeAPI = new smIframeAPI(contents);

iframeAPI.onEvent(smIframeEvent.PLAY , function(){
// 영상 재생 시 실행
console.log(‘play’);
});

iframeAPI.onEvent(smIframeEvent.PAUSE , function(){
// 영상 일지정지 이벤트
console.log(‘pause’);
});
// iframeAPI.play(); // 영상 재생 시 사용
// iframeAPI.pause(); // 영상 일시정지 시 사용
}

</script>