VIDEO PACK 통계 연동 가이드를 통해 WECANDEO 전용 Player를 사용하지 않는 경우에도 WECANDEO에 통계 데이터를 전송 할 수 있습니다.

VideoStatistics.js 를 아래와 같이 세팅하여 사용하시면 됩니다.

제공된 js 파일 주소를 import 합니다.

<script src=”//play-cdn.wecandeo.com/html/utils/videoStatistics.js”></script>

videoStatistics ( null , key )

null null
key ( string ) wecandeo video key

onReady ( function )

function 통계 객체가 데이터 전송 준비가 완료 되면 등록된 함수를 호출 합니다.
(return value : true or false )

setLog ( type , data ) : videoStatsEvent 참고

type ( string ) 재생중인 비디오 상태 값을 전달 합니다. ( play , pause , complete …)
data type 에 따라 필요한 데이터 값을 전달 합니다.

videoStatsEvent

READY : “playerReady” 플레이어가 준비되면 update 함수로 전달 합니다. ( data : 없음 )
IDLE : “idle” 영상 재생이 완료 된 후 준비 화면으로 전환되면 update 함수로 전달 합니다.
( data : 없음 )
PLAY : “play” 영상 재생이 시작되면 update 함수로 전달 합니다. ( data : 없음 )
PAUSE : “pause” 영상이 일시정지 되면 update 함수로 전달 합니다. ( data : 없음 )
COMPLETE : “complete” 영상 재생이 완료되면 update 함수로 전달 합니다. ( data : 없음 )
SEEK : “seek” 재생 위치가 변경되면 update 함수로 전달 합니다.
( data : object {seeking : true or false , time : 10 (int – 현재 재생 시간) } )
※ Sample
재생 위치 변경 시 : {seeking : true , time : 10 }
재생 위치 변경 완료 시 : { seeking : false , time : 20 }
VIDEO_TIME : “videoTime” 영상이 재생중 일때 update 함수로 전달 합니다.
( data : object {type : “currentTime” or “duration” , value : 20 (int) } )
※ Sample
전체 재생시간 : {type : “duration” , time : 145 (Number) }
현재 재생시간 : { type : “currentTime” , time : 7.345 (Number) }
VIDEO_CHANGE : “videoChange” 영상이 변경 되면 update 함수로 전달 합니다.
( data : object{ key : wecandeo video key (string) } )

Sample Code

<script src="//play-cdn.wecandeo.com/html/utils/videoStatistics.js"></script>
<script>
    // 통계 객체 변수
    var _videoStats;

    // 통계 객체 생성
    _videoStats = new videoStatistics(null, ‘wecandeo video key’);

    // 통계 객체로 영상 진행 상황 전달 함수
    function sendStatistics(type, data) { 

    // setLog 함수로 영상 진행 상황 전달
    _videoStats.setLog(type, data);
    }

    window.onload = function () {
        var video = document.getElementById(‘video’);
        video.addEventListener(‘play’, function () {
            sendStatistics(videoStatsEvent.PLAY);
        });

        video.addEventListener(‘pause’, function () {
            if (this.currentTime == this.duration) 
                return;
            
            sendStatistics(videoStatsEvent.PAUSE);
        });

        var isDuration = false;
        video.addEventListener(‘timeupdate’, function () {
            if (!isDuration) {
                sendStatistics(videoStatsEvent.VIDEO_TIME, {
                    type: ”duration”,
                    value: video.duration
                });
                isDuration = true;
            }
            sendStatistics(videoStatsEvent.VIDEO_TIME, {
                type: ”currentTime”,
                value: video.currentTime
            });
        });

        video.addEventListener(‘durationchange’, function () {
            sendStatistics(videoStatsEvent.VIDEO_TIME, {
                type: ”duration”,
                value: video.duration
            });
        });

        video.addEventListener(‘loadedmetadata’, function () {
            sendStatistics(videoStatsEvent.VIDEO_TIME, {
                type: ”duration”,
                value: video.duration
            });
        });

        video.addEventListener(‘seeking’, function () {
            sendStatistics(videoStatsEvent.SEEK, {
                seeking: true,
                time: video.currentTime
            });
        });

        video.addEventListener(‘seeked’, function () {
            sendStatistics(videoStatsEvent.SEEK, {
                seeking: false,
                time: video.currentTime
            });
        });
        video.addEventListener(‘ended’, function () {
            sendStatistics(videoStatsEvent.COMPLETE);
        });

        // 페이지 로딩과 통계 로딩 및 영상 재생 준비가 완료 되었을 때
        sendStatistics(videoStatsEvent.READY);
    }

    function videoChange() {
        sendStatistics(videoStatsEvent.VIDEO_CHANGE, {key:’wecandeo video key’});
        video.src = ‘wecandeo video url’;
    }
</script>

연동 순서 및 흐름
1. 제공된 주소로 js 파일을 import 합니다.
2. 비디오 통계 객체를 생성 합니다.
3. 영상 재생 상태에 따라 통계 객체의 setLog 함수를 통해 type 과 data 를 전달 합니다.
4. 통계 객체는 전송 준비가 완료되면 전달 받은 데이터를 wecandeo 통계 서버로 전송 합니다.

주의
광고 및 다른 영상 재생시 wecandeo 통계 파일의 setLog가 호출되지 않도록 주의하셔야 합니다.
비정상적인 통계 데이터가 쌓일 수 있습니다.