みかづきブログ その3

3ヶ月つづけてみました。

埋め込みVimeoプレーヤーをJavaScriptから制御する

developer.vimeo.com

こちらのサイト にすべてがまとまってます。
再生時間が取得できるので動画のプログレスに合わせてページの背景色を変化させています。


JavaScript

$(function() {
    var body   = $(document.body);
    var iframe = $('#player1')[0];
    var player = $f(iframe);
    var status = $('.status');

    // When the player is ready, add listeners for pause, finish, and playProgress
    player.addEvent('ready', function() {
        status.text('ready');
        
        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
        player.addEvent('playProgress', onPlayProgress);
    });

    // Call the API when a button is pressed
    $('button').bind('click', function() {
        player.api($(this).text().toLowerCase());
    });

    function onPause(id) {
        status.text('paused');
    }

    function onFinish(id) {
        status.text('finished');
    }

    function onPlayProgress(data, id) {
        status.text(data.seconds + 's played');
        body.css({
            background: "rgba(0,0,0," + data.percent + ")"
        });
    }
});

DEMO