플레이어 iframe API

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); ※ 다중 플레이어 세팅 샘플코드 보기 api.setName(‘iframe element name_1’); 플레이어 이벤트에 대한 callBack 함수 등록 Event 참고
onEvent (smIframeEvent.REMOVE, callback)	Web Page에서 플레이어를 제거 시 콜백 함수가 실행됩니다.
onEvent (smIframeEvent.READY, callback)	플레이어 준비 완료 시 콜백 함수가 실행됩니다.
destroy()	onEvent로 등록된 모든 이벤트가 해제됩니다.

Playback

Name	Description
getState()	플레이어 상태 값이 반환됩니다. Returns String - VALUE : idle, playing, pause, buffering, complete
play()	영상 재생을 시작합니다.
pause()	영상 일시정지가 됩니다.
stop()	영상 재생을 멈추고 Idle 화면으로 전환합니다.
setPlaybackData(value)	패키지에 설정된 `Playback Callback URL`로 전송할 추가 정보를 입력합니다. ※ script version `v1.4.0` 이상에서 사용 가능합니다. - 데이터 타입은 UTF-8 이어야 합니다. - 웹 특성상 UrlEncode해서 입력해야 합니다. - value 타입은 String 입니다. - customValue 항목으로 전달됩니다. e.g., customValue=value0%3Dred%26value1%3Dblue
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)	플레이어 컨트롤 바 노출 상태가 변경되면 콜백 함수가 실행됩니다. Returns : true or false

Seek

Name	Description
onEvent (smIframeEvent.SEEK, callback)	영상 재생 위치 변경 시 콜백 함수가 실행됩니다. Returns Object - seeking : Boolean - time : Number
setPosition (value)	영상 재생 위치를 변경합니다.
getPosition()	현재 재생 시간이 반환됩니다. Returns Number
getDuration()	영상 전체 시간이 반환됩니다. Returns Number
seekEnable (value)	영상 구간 이동 가능 여부를 제어합니다. (true/false)
onEvent (smIframeEvent.TIME, callback)	초당 10번의 이벤트가 발생됩니다. Returns Object - position : Number - duration : Number

Volume

Name	Description
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

Name	Description
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

Caption

Name	Description
onEvent (smIframeEvent.CAPTION, callback)	영상 로드 시 등록된 자막 리스트와 함께 콜백 함수가 실행됩니다. Returns Array [ Object{ - code : “ko” - default : true - format : “VTT” - label : “한국어” - url : “caption url” - index : 2 (int) } ]
onEvent (smIframeEvent.CAPTION_CHANGE, callback)	플레이어 자막 변경 시 콜백 함수가 실행됩니다. Returns Object - label : “한국어” - index : 2
setCaption (value)	노출중인 자막을 변경합니다. (index : int)

Playback Rate

Name	Description
usedPlaybackRate()	배속설정 사용여부 조회 Returns Boolean
setPlaybackRate (value)	영상 재생 속도를 변경합니다.
getPlaybackRate()	영상 재생 속도를 반환합니다.
playbackRateEnable (value)	배속설정 사용여부 설정 (true/false)
setPlaybackRateList (value)	배속설정 목록 설정 - "0.5, 0.75, 1.0, 1.25, 1.5, 2.0" : String ※ 영상 재생을 시작하기 전에 설정해야 합니다.
onEvent (smIframeEvent.VIDEO_RATE, callback)	영상 재생 속도가 변경되면 콜백 함수가 실행됩니다.

Playtime

Name	Description
getAccPlaytime()	시청 누적 재생시간 조회 Returns Number (초)
getLastPlaytime()	최종 재생시간 조회 Returns Number (초)

Mirroring

Name	Description
toggleMirroring (value)	플레이어 원격재생 버튼 활성화 설정 (true/false)

DRM

Name	Description
setDrmToken (value, value)	Multi DRM 영상 재생을 위한 정보 설정 parameter value1. PallyCon DRM 라이선스 토큰 - 고객사에서 생성한 토큰 : string value2. PallyCon 사이트 ID - PallyCon 콘솔 > 트랜스코딩 & 패키징 > 설정 > 사이트 ID 확인 : string

Event

Name	Description
onEvent (type, callback)	플레이어 이벤트 callBack 함수 등록 e.g., api.onEvent( smIframeEvent.VIDEO_PLAY , function(){ // 영상 재생이 시작 되었습니다. });
offEvent (type)	onEvent로 등록된 플레이어 이벤트 제거 e.g., api.offEvent( smIframeEvent.VIDEO_PLAY );

CuePoint

Name	Description
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)

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.title = ‘String’( ‘video title’ ) itemObj.duration = Number ( 20(sec) ) itemObj.thumb = ‘String’( ‘image URL’ ) itemObj.landingURL = ‘String’( ‘page URL’ )

Name

Description

setRecommend(Object)

입력받은 Object 데이터를 영상 종료 후 화면에 표시합니다.

e.g., Object = {}
Object.type = ‘String’( ‘type1’ or ‘type2’ or ‘type3’ or ‘type4’ )
Object.items = [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>

📘{DOMAIN}

Setup

Playback

Seek

Volume

Resize

Caption

Playback Rate

Playtime

Mirroring

DRM

Event

CuePoint

smIframeEvent (Event Type)

setRecommend

Sample Code

Sample Code Multiple

📘
{DOMAIN}