iframeAPI는 아래와 같이 세팅하여 사용하시면 됩니다.
제공된 js 파일을 import 합니다.
<script src=”//play.wecandeo.com/html/utils/iframeAPI.js”></script>
Setup
setup (parameter) | Api 객체를 아래와 같이 설정 합니다.
var ifrm = document.getElementById(‘iframe element id’); # 다중 플레이어 세팅 샘플코드 보기 플레이어 이벤트에 대한 callBack 함수 등록 Event 참고 |
onEvent (smIframeEvent.REMOVE, callback) | Web Page 에서 플레이어를 제거 시 콜백 함수가 실행 됩니다. |
onEvent (smIframeEvent.READY, callback) | 플레이어 준비 완료 시 콜백 함수가 실행 됩니다. |
destroy() | onEvent 로 등록된 모든 이벤트가 해제됩니다. |
Playback
getState() | 플레이어 상태 값이 반환 됩니다. Returns String – VALUE : idle , playing , pause , buffering |
play() | 영상 재생을 시작 합니다. |
pause() | 영상 일시정지가 됩니다. |
stop() | 영상 재생을 멈추고 Idle 화면으로 전환 합니다. |
setPlaybackRate (value) | 영상 재생 속도를 변경 합니다. |
getPlaybackRate() | 영상 재생 속도를 반환 합니다. |
onEvent (smIframeEvent.PAUSE, callback) | 영상이 일시정지 되면 콜백 함수가 실행 됩니다. |
onEvent (smIframeEvent.BUFFERING, callback) | 영상 재생 중 버퍼링 시 콜백 함수가 실행 됩니다. |
onEvent (smIframeEvent.IDLE, callback) | 플레이어가 초기화면으로 전환 될 때 콜백 함수가 실행 됩니다. |
onEvent (smIframeEvent.COMPLETE, callback) | 영상 재생이 완료 되면 콜백 함수가 실행 됩니다. |
onEvent (smIframeEvent.ERROR, callback) | 플레이어 오류 발생 시 콜백 함수가 실행 됩니다. |
onEvent (smIframeEvent.VIDEO_RATE, callback) | 영상 재생 속도가 변경 되면 콜백 함수가 실행 됩니다. |
onEvent (smIframeEvent.CONTROLS, callback) | 플레이어 컨트롤 바 노출 상태가 변경되면 콜백 함수가 실행 됩니다. Return : true or false |
Seek
onEvent (smIframeEvent.SEEK, callback) | 영상 재생 위치 변경 시 콜백 함수가 실행됩니다. Returns Object – seeking : Boolean – time : Number |
setPosition (value) | 영상 재생 위치를 변경 합니다. |
getPosition() | 현재 재생 시간이 반환 됩니다. Returns Number |
getDuration() | 영상 전체 시간이 반환 됩니다. Returns Number |
onEvent (smIframeEvent.TIME, callback) | 초당 10번의 이벤트가 발생 됩니다. Returns Object – position : Number – duration : Number |
Volume
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 |
setFullscreen(value) | 전체화면 상태를 변경 합니다. ( true / false ) ※ 단, 특정 OS 또는 브라우저에서 사용자의 동작(또는 제스처)를 판단하는 기준에 따라 적용되지 않을 수 있습니다. 이 경우 함수 호출 시 ERROR로 처리될 수 있으며 사용자 동작에 의해서만 전체화면이 전환 됩니다 (전체화면 해제는 사용자의 선택이 아니어도 전환 됩니다.) |
getFullscreen() | 전체화면에 대한 상태 값이 반환 됩니다. Returns Boolean |
getWidth() | 플레이어 폭 값이 반환 됩니다. Returns Number |
getHeight() | 플레이어 높이 값이 반환 됩니다. Returns Number |
Event
onEvent (type, callback) | 플레이어 이벤트 callBack 함수 등록 Ex) api.onEvent( smIframeEvent.VIDEO_PLAY , function(){ // 영상 재생이 시작 되었습니다. }); |
offEvent (type) | onEvent로 등록 된 플레이어 이벤트 제거 Ex) api.offEvent( smIframeEvent.VIDEO_PLAY ); |
CuePoint
onEvent ( smIframeEvent.CUE_POINT_START , callback ) | 큐포인트 노출이 시작되면 콜백 함수가 실행됩니다. Returns Object – type : String – format : String ( txt , img ) – video_id : Number – package_id : Number – cpid : Number – start_duration : Number – end_duration : Number – title : String – content : String – link : String |
onEvent ( smIframeEvent.CUE_POINT_CLICK , callback ) | 큐포인트 클릭 시 콜백 함수가 실행됩니다. Returns Object – type : String – format : String ( txt , img ) – video_id : Number – package_id : Number – cpid : Number – start_duration : Number – end_duration : Number – title : String – content : String – link : String |
smIframeEvent (Event Type)
IDLE | 대기 화면 (Playback stop() 실행시 IDLE로 전환) |
READY | 재생 준비 완료 |
PLAY | 재생 시작 |
PAUSE | 일시 정지 |
BUFFERING | 버퍼링 |
COMPLETE | 재생 완료 |
SEEK | 구간 이동 시작 |
SEEKED | 구간 이동 완료 |
VOLUME | 볼륨 변경 |
FULLSCREEN | 전체화면 모드 전환 |
TIME | 재생 시간 |
RESIZE | 플레이어 사이즈 변경 |
REMOVE | 플레이어 삭제 |
ERROR | 플레이어 에러 |
CUE_POINT_START | 큐포인트 노출 시작 |
CUE_POINT_CLICK | 큐포인트 클릭 |
VIDEO_RATE | 재생 속도 변경 |
CONTROLS | 컨트롤 바 노출 여부 |
userWatermark
setUserWatermark( Object ) | 입력받은 Object 데이터를 화면에 표시 합니다.
Ex) Object = {}; |
smIframeWatermarkPosition
TOP_LEFT | 상단 왼쪽 정렬 |
TOP_MIDDLE | 상단 가운데 정렬 |
TOP_RIGHT | 상단 오른쪽 정렬 |
CENTER_LEFT | 중앙 왼쪽 정렬 |
CENTER_MIDDLE | 중앙 가운데 정렬 |
CENTER_RIGHT | 중앙 오른쪽 정렬 |
BOTTOM_LEFT | 하단 왼쪽 정렬 |
BOTTOM_MIDDLE | 하단 가운데 정렬 |
BOTTOM_RIGHT | 하단 오른쪽 정렬 |
RAMDOM | 플레이 시 랜덤하게 위치 이동 |
setRecommand
setRecommand( Object ) | 입력받은 Object 데이터를 영상 종료 후 화면에 표시 합니다.
Ex) Object = {} itemObj.title = ‘String’( ‘video title’ ) |
Sample Code
<script src= "//play.wecandeo.com/html/utils/iframeAPI.js"></script> <script> var iframeAPI; window.onload = function () { var iframe = document.getElementById(‘player’); 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.onEvent(smIframeEvent.CUE_POINT_START, function (data) { // 큐포인트 노출 이벤트 console.log(‘cue point start’, data); }); iframeAPI.onEvent(smIframeEvent.CUE_POINT_CLICK, function (data) { // 큐포인트 클릭 이벤트 console.log(‘cue point click’, data); }); iframeAPI.onEvent(smIframeEvent.VIDEO_RATE, function (data) { console.log(‘index playbackRate’, data); }); // iframeAPI.play(); // 영상 재생 시 사용 // iframeAPI.pause(); // 영상 일시정지 시 사용 iframeAPI.onEvent(smIframeEvent.READY, function() { // 사용자 워터마크 설정 값 var object = {}; object.text = ‘title’; object.fontSize = ‘40px’; object.color = ‘#000000’; object.opacity = 20; (0 ~ 100); // ** smIframeWatermarkPosition 참고 ** object.position = smIframeWatermarkPosition.TOP_LEFT; // 사용자 워터마크 추가 iframeAPI.setUserWatermark(object); // 추천동영상 설정 값 var recommand = {}; recommand.type = ‘type1’; recommand.items = [ { title: ’추천 동영상 테스트 1 ’, duration:30 thumb:’thumbnail image url’, landingURL:’page url’ }, { title:’추천 동영상 테스트 2 ’, duration:360 thumb: ’thumbnail image url’, landingURL:’page url’ } ]; // 추천동영상 추가 iframeAPI.setRecommand(recommand); }); } </script> <iframe id="player" width="100%" height="100%" src="play url" frameborder="0" allowfullscreen="" style="position:absolute;"></iframe>
Sample Code Multiple
<script src="//play.wecandeo.com/html/utils/iframeAPI.js"></script> <script> var api_1; var api_2; window.onload = function(){ var ifrm = document.getElementById('player1'); var contents = ifrm.contentWindow || ifrm.contentDocument; api = new smIframeAPI(contents); api.setName('player1'); //api.setName의 입력값과 iframe 태그의 name 값은 같아야 합니다. api.onEvent(smIframeEvent.PLAY , function(){ //영상 재생 시 실행 console.log('index play') }) var ifrm2 = document.getElementById('player2'); var contents2 = ifrm2.contentWindow || ifrm2.contentDocument; api2 = new smIframeAPI(contents2); api2.setName('player2'); api2.onEvent(smIframeEvent.PLAY , function(){ //영상 재생 시 실행 console.log('index play2') }) } </script> <iframe id="player1" name="player1" width="100%" height="100%" src="play url" frameborder="0" allowfullscreen="" style="position:absolute;"></iframe> <iframe id="player2" name="player2" style="top:520px;" width="100%" height="100%" src="play url" frameborder="0" allowfullscreen="" style="position:absolute;"></iframe>