iframeAPI는 아래와 같이 세팅하여 사용하시면 됩니다.
제공된 js 파일을 import 합니다.
{DOMAIN}
- Domain은 VIDEOPACK 생성 시 발급 받은 도메인입니다.
- Domain은 VIDEOPACK 관리자 화면(CMS)의 _[계정관리 > 도메인 > 도메인 정보]_에서 확인할 수 있습니다.
<script src="//{DOMAIN}/player/js/v1.4.0/utils/iframeAPI.js"></script>Setup
| Name | Description | 
|---|---|
| new smIframeAPI | 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) | 플레이어 준비 완료 시 콜백 함수가 실행됩니다. | 
| destroy() | onEvent로 등록된 모든 이벤트가 해제됩니다. | 
Playback
| Name | Description | 
|---|---|
| getState() | 플레이어 상태 값이 반환됩니다. 
 | 
| play() | 영상 재생을 시작합니다. | 
| pause() | 영상 일시정지가 됩니다. | 
| stop() | 영상 재생을 멈추고 Idle 화면으로 전환합니다. | 
| setPlaybackData(value) | 패키지에 설정된  
 | 
| onEvent (smIframeEvent.PLAY, callback) | 영상이 재생되면 콜백 함수가 실행됩니다. | 
| onEvent (smIframeEvent.PAUSE, callback) | 영상이 일시정지되면 콜백 함수가 실행됩니다. | 
| onEvent (smIframeEvent.BUFFERING, callback) | 영상 재생 중 버퍼링 시 콜백 함수가 실행됩니다. | 
| onEvent (smIframeEvent.IDLE, callback) | 플레이어가 초기화면으로 전환될 때 콜백 함수가 실행됩니다. | 
| onEvent (smIframeEvent.COMPLETE, callback) | 영상 재생이 완료되면 콜백 함수가 실행됩니다. | 
| onEvent (smIframeEvent.ERROR, callback) | 플레이어 오류 발생 시 콜백 함수가 실행됩니다. | 
| onEvent (smIframeEvent.CONTROLS, callback) | 플레이어 컨트롤 바 노출 상태가 변경되면 콜백 함수가 실행됩니다. | 
Seek
| Name | Description | 
|---|---|
| onEvent (smIframeEvent.SEEK, callback) | 영상 재생 위치 변경 시 콜백 함수가 실행됩니다. 
 | 
| setPosition (value) | 영상 재생 위치를 변경합니다. | 
| getPosition() | 현재 재생 시간이 반환됩니다. | 
| getDuration() | 영상 전체 시간이 반환됩니다. | 
| seekEnable (value) | 영상 구간 이동 가능 여부를 제어합니다. (true/false) | 
| onEvent (smIframeEvent.TIME, callback) | 초당 10번의 이벤트가 발생됩니다. 
 | 
Volume
| Name | Description | 
|---|---|
| setMuted (value) | 음소거 상태를 변경합니다. (true/false) | 
| getMuted() | 음소거 상태가 반환됩니다. | 
| setVolume (value) | 볼륨 값을 변경합니다. (0 ~ 100) | 
| getVolume() | 볼륨 값이 반환됩니다. 
 | 
| onEvent (smIframeEvent.VOLUME, callback) | 볼륨 변경 시 콜백 함수가 실행됩니다. 
 | 
Resize
| Name | Description | 
|---|---|
| onEvent (smIframeEvent.RESIZE, callback) | 플레이어 사이즈 변경 시 콜백 함수가 실행됩니다. 
 | 
| onEvent (smIframeEvent.FULLSCREEN, callback) | 플레이어 화면이 전체화면 or 기본화면으로 전환될 때 콜백 함수가 실행됩니다. | 
| setFullscreen (value) | 전체화면 상태를 변경합니다. (true/false) ※ 단, 특정 OS 또는 브라우저에서 사용자의 동작(또는 제스처)를 판단하는 기준에 따라 적용되지 않을 수 있습니다. | 
| getFullscreen() | 전체화면에 대한 상태 값이 반환됩니다. | 
| getWidth() | 플레이어 폭 값이 반환됩니다. | 
| getHeight() | 플레이어 높이 값이 반환됩니다. | 
Caption
| Name | Description | 
|---|---|
| onEvent (smIframeEvent.CAPTION, callback) | 영상 로드 시 등록된 자막 리스트와 함께 콜백 함수가 실행됩니다. 
 | 
| onEvent (smIframeEvent.CAPTION_CHANGE, callback) | 플레이어 자막 변경 시 콜백 함수가 실행됩니다. 
 | 
| setCaption (value) | 노출중인 자막을 변경합니다. (index : int) | 
Playback Rate
| Name | Description | 
|---|---|
| usedPlaybackRate() | 배속설정 사용여부 조회 | 
| setPlaybackRate (value) | 영상 재생 속도를 변경합니다. | 
| getPlaybackRate() | 영상 재생 속도를 반환합니다. | 
| playbackRateEnable (value) | 배속설정 사용여부 설정 (true/false) | 
| setPlaybackRateList (value) | 배속설정 목록 설정 
 | 
| onEvent (smIframeEvent.VIDEO_RATE, callback) | 영상 재생 속도가 변경되면 콜백 함수가 실행됩니다. | 
Playtime
| Name | Description | 
|---|---|
| getAccPlaytime() | 시청 누적 재생시간 조회 | 
| getLastPlaytime() | 최종 재생시간 조회 | 
DRM
| Name | Description | 
|---|---|
| setDrmToken (value, value) | Multi DRM 영상 재생을 위한 정보 설정 value1. PallyCon DRM 라이선스 토큰 
 value2. PallyCon 사이트 ID 
 | 
Event
| Name | Description | 
|---|---|
| onEvent (type, callback) | 플레이어 이벤트 callBack 함수 등록 | 
| offEvent (type) | onEvent로 등록된 플레이어 이벤트 제거 | 
CuePoint
| Name | Description | 
|---|---|
| onEvent (smIframeEvent.CUE_POINT_START, callback) | 큐포인트 노출이 시작되면 콜백 함수가 실행됩니다. Returns Object 
 | 
| onEvent (smIframeEvent.CUE_POINT_CLICK, callback) | 큐포인트 클릭 시 콜백 함수가 실행됩니다. 
 | 
smIframeEvent (Event Type)
| Name | Description | 
|---|---|
| IDLE | 대기 화면 (Playback stop() 실행시 IDLE로 전환) | 
| READY | 재생 준비 완료 | 
| PLAY | 재생 시작 | 
| PAUSE | 일시 정지 | 
| BUFFERING | 버퍼링 | 
| COMPLETE | 재생 완료 | 
| SEEK | 구간 이동 시작(true), 구간 이동 완료(false) | 
| VOLUME | 볼륨 변경 | 
| FULLSCREEN | 전체화면 모드 전환 | 
| TIME | 재생 시간 | 
| RESIZE | 플레이어 사이즈 변경 | 
| REMOVE | 플레이어 삭제 | 
| ERROR | 플레이어 에러 | 
| CUE_POINT_START | 큐포인트 노출 시작 | 
| CUE_POINT_CLICK | 큐포인트 클릭 | 
| VIDEO_RATE | 재생 속도 변경 | 
| CONTROLS | 컨트롤 바 노출 여부 | 
setRecommend
| Name | Description | 
|---|---|
| setRecommend(Object) | 입력받은 Object 데이터를 영상 종료 후 화면에 표시합니다. e.g., Object = {} Object.type = ‘String’( ‘type1’ or ‘type2’ or ‘type3’ or ‘type4’ ) Object.items = [itemObj{} , itemObj {}][itemObj , itemObj ] itemObj.title = ‘String’( ‘video title’ ) itemObj.duration = Number ( 20(sec) ) itemObj.thumb = ‘String’( ‘image URL’ ) itemObj.landingURL = ‘String’( ‘page URL’ ) | 
Sample Code
<script src= "//{DOMAIN}/player/js/v1.4.0/utils/iframeAPI.js"></script>
<script>
    var iframeAPI;
    window.onload = function () {
        var iframe = document.getElementById('player');
        var contents = iframe.contentWindow || iframe.contentDocument;
        iframeAPI = new smIframeAPI(contents);
      
        // iframeAPI.play();  // 영상 재생 시 사용
        // iframeAPI.pause(); // 영상 일시정지 시 사용
      
        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.onEvent(smIframeEvent.READY, function() {
            // 추천동영상 설정 값
            var recommend = {};
            recommend.type = 'type1';
            recommend.items = [
                {
                    title: '추천 동영상 테스트 1',
                    duration:30 
                    thumb:'thumbnail image url',
                    landingURL:'page url'
                }, {
                    title:'추천 동영상 테스트 2',
                    duration:360 
                    thumb: 'thumbnail image url',
                    landingURL:'page url'
                }
            ];
            // 추천동영상 추가
            iframeAPI.setRecommend(recommend);
        });
    }
</script>
<iframe id="player" width="100%" height="100%" src="play url" frameborder="0" allowfullscreen="" style="position:absolute;"></iframe>Sample Code Multiple
<script src="//{DOMAIN}/player/js/v1.4.0/utils/iframeAPI.js"></script>
<script>
var iframeAPI_1;
var iframeAPI_2;
window.onload = function(){
    var ifrm = document.getElementById('player1');
    var contents = ifrm.contentWindow || ifrm.contentDocument;
    iframeAPI_1 = new smIframeAPI(contents);
    iframeAPI_1.setName('player1'); //api.setName의 입력값과 iframe 태그의 name값은 같아야 합니다.
    iframeAPI_1.onEvent(smIframeEvent.PLAY, function(){
    //영상 재생 시 실행
    console.log('index play')
    })
    var ifrm2 = document.getElementById('player2');
    var contents2 = ifrm2.contentWindow || ifrm2.contentDocument;
    iframeAPI_2 = new smIframeAPI(contents2);
    iframeAPI_2.setName('player2');
    iframeAPI_2.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>