WECANDEO로 이동

동영상 진도 체크 방법 - 플레이어 API 활용

Suggest Edits

동영상 진도 체크란?

특정 회원이 플레이한 동영상의 시청 시간 값을 체크하여 시청 시간을 중단 후 다시 재생 시 해당 중단된 시간부터 동영상을 이어볼 수 있는 기능입니다.

현재 위캔디오에서는 동영상 진도체크(이어보기) 기능을 자체적으로는 제공하고 있지 않습니다.

다만, 현재 동영상의 플레이 상태(READY(준비) / PLAY(재생 중) / PAUSE(일시 정지) / COMPLETE(재생 완료)) 값과 현재 동영상의 시청 시간 값을 저희가 제공해 드리는 iframeAPI를 통해 연동할 수 있게 제공하고 있으며, 이를 통해 자체 회원의 정보와 연동하여 진도 체크할 수 있는 기능으로 구현하여 사용하실 수 있습니다.

자세한 사항은 아래 안내 사항을 참고해 주시기 바랍니다.

유의 사항

  1. 플레이어 최초 로드 시 READY 이벤트로 callback 함수 등록이 가능합니다.
    플레이어 재생 준비 상태가 완료되면 callback 함수가 실행됩니다.

  2. PLAY, PAUSE 이벤트로 callback 함수 등록이 가능합니다.
    PLAY callback에서는 영상 재생 시작과 관련된 진도체크 작업을 하시고
    PAUSE callback에서는 영상 재생 정지와 관련된 진도체크 작업을 진행하시면 됩니다.

  3. TIME 이벤트로 callback 함수 등록이 가능합니다.
    TIME 이벤트는 Return 값을 가지고 있으며, Return 값에는 현재 재생 시간과 전체 재생 시간이 포함되어 callback 함수로 전달됩니다
    callback 함수로 전달된 Return 값을 사용하여 진도체크 작업을 진행하시면 됩니다.

  4. COMPLETE 이벤트로 callback 함수 등록이 가능합니다.
    callback에서 영상 재생 완료에 대한 진도체크 작업을 하시면 됩니다.

📘

이벤트 등록과 iframeAPI 사용법은 Sample Code를 참고해주세요.

Sample Code

<script src="//timgs.acs.wecandeo.com/player/utils/iframeAPI.js"></script>
<script>
    var iframeAPI;
    window.onload = function(){
        var ifrm = document.getElementById('player');
        var contents = ifrm.contentWindow || ifrm.contentDocument;
        iframeAPI = new smIframeAPI(contents);
    
    iframeAPI.onEvent(smIframeEvent.READY , function(){
     // 플레이어 준비 완료 이벤트
            console.log('ready');
        });
    
        iframeAPI.onEvent(smIframeEvent.PLAY , function(){
            //영상 재생 이벤트
            console.log('play');
        });
    
        iframeAPI.onEvent(smIframeEvent.PAUSE , function(){
            //영상 일시정지 이벤트
            console.log('pause');
        });
        
    iframeAPI.onEvent(smIframeEvent.COMPLETE, function(){
    //영상 재생 완료 이벤트
            console.log('complete');
        });
    
    iframeAPI.onEvent(smIframeEvent.TIME, function(data){
    //영상 재생시간 이벤트
            console.log(data.position , data.duration);
        });
    
    }
    <script>
    <iframe id="player" width="100%" height="100%" src="play url" frameborder="0" allowfullscreen="" style="position:absolute;"></iframe>

Updated almost 2 years ago