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);

# 다중 플레이어 세팅 샘플코드 보기
api.setName(‘iframe element name_1’);

플레이어 이벤트에 대한 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 = {};
Object.text = ‘String’( ‘ID’ )
Object.fontSize = Number ( 20 )
Object.color = ‘’(Hex : #000000)
Object.opacity = Number ( 0~100 )
Object.position = ‘String’( smIframeWatermarkPosition.TOP_LEFT )

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 = {}
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= "//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>