VIMEO 동영상 플레이어 api

비메오 개발자 사이트에서 가져온 것.

플레이되는 시간 및 상태 정보를 모두 다 가져와서 사용 할 수 있다.

<script language="javascript">

var f = $('iframe'),

    url = f.attr('src').split('?')[0],

    status = $('.status');

// Listen for messages from the player

if (window.addEventListener){

    window.addEventListener('message', onMessageReceived, false);

}

else {

    window.attachEvent('onmessage', onMessageReceived, false);

}

// Handle messages received from the player

function onMessageReceived(e) {

    var data = JSON.parse(e.data);

    

    switch (data.event) {

        case 'ready':

            onReady();

            break;

           

        case 'playProgress':

            onPlayProgress(data.data);

            break;

            

        case 'pause':

            onPause();

            break;

           

        case 'finish':

            onFinish();

            break;

    }

}

// Call the API when a button is pressed

$('button').on('click', function() {

    post($(this).text().toLowerCase());

});

// Helper function for sending a message to the player

function post(action, value) {

    var data = { method: action };

    

    if (value) {

        data.value = value;

    }

    

    f[0].contentWindow.postMessage(JSON.stringify(data), url);

}

function onReady() {

    status.text('ready');

    

    post('addEventListener', 'pause');

    post('addEventListener', 'finish');

    post('addEventListener', 'playProgress');

}

function onPause() {

    status.text('paused');

}

function onFinish() {

    status.text('finished');

}

function onPlayProgress(data) {

    status.text(data.seconds + 's played');

}

</script>

<iframe src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<p>Video status: <span class="status">...</span></p>

<p><button>Play</button> <button>Pause</button></p>