iframeAPI는 아래와 같이 세팅하여 사용하시면 됩니다.
제공된 js 파일을 import 합니다.
<script src=”//play.acs.wecandeo.com/html/utils/iframeAPI.js”></script>
Setup
Name | Description |
---|---|
new smIframeAPI | API 객체를 아래와 같이 생성합니다. var ifrm = document.getElementById(‘iframe element id’);
|
onEvent (smIframeEvent.REMOVE, callback) | Web Page에서 플레이어를 제거 시 콜백 함수가 실행됩니다. |
onEvent (smIframeEvent.READY, callback) | 플레이어 준비 완료 시 콜백 함수가 실행됩니다. |
destroy() | onEvent로 등록된 모든 이벤트가 해제됩니다. |
Playback
Name | Description |
---|---|
getState() | 플레이어 상태 값이 반환됩니다.
|
play() | 영상 재생을 시작합니다. |
pause() | 영상 일시정지가 됩니다. |
stop() | 영상 재생을 멈추고 Idle 화면으로 전환합니다. |
setPlaybackRate (value) | 영상 재생 속도를 변경합니다. |
getPlaybackRate() | 영상 재생 속도를 반환합니다. |
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.VIDEO_RATE, 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) |
Playtime
Name | Description |
---|---|
getLastPlaytime() | 최종 재생시간 조회 |
Event
Name | Description |
---|---|
onEvent (type, callback) | 플레이어 이벤트 callBack 함수 등록 |
offEvent (type) | onEvent로 등록 된 플레이어 이벤트 제거 |
CuePoint
Name | Description |
---|---|
onEvent (smIframeEvent.CUE_POINT_START, callback) | 큐포인트 노출이 시작되면 콜백 함수가 실행됩니다.
|
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 | 컨트롤 바 노출 여부 |
setRecommand
Name | Description |
---|---|
setRecommand(Object) | 입력받은 Object 데이터를 영상 종료 후 화면에 표시합니다. e.g., Object = {} itemObj.title = ‘String’( ‘video title’ ) |
Sample Code
<script src= "//play.acs.wecandeo.com/html/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 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.acs.wecandeo.com/html/utils/iframeAPI.js"></script>
<script>
var api1;
var api2;
window.onload = function(){
var ifrm = document.getElementById('player1');
var contents = ifrm.contentWindow || ifrm.contentDocument;
api1 = new smIframeAPI(contents);
api1.setName('player1'); //api.setName의 입력값과 iframe 태그의 name값은 같아야 합니다.
api1.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>