Graduate 3 Assignment

by Larry Adams

HTML

<iframe src="http://player.vimeo.com/video/18047390?title=0&amp;byline=0&amp;portrait=0&api=1" width="600" height="225" frameborder="2"></iframe><p><a href="http://vimeo.com/18047390">Captain Awesome</a> from <a href="http://vimeo.com/viborganimation">The Animation Workshop</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<br>

<button>play</button> <button>pause</button>

JavaScript

var f = $('iframe'),
    url = f.attr('src').split('?')[0];

// postMessage
function post(action, value) {
    var data = { method: action };
    
    if (value) {
        data.value = value;
    }
    
    f[0].contentWindow.postMessage(JSON.stringify(data), url);
}

// display event
function onMessageReceived(e) {
    var data = JSON.parse(e.data);
    
    $('span').text(data.event);
    
    // Add listeners here
    if (data.event === 'ready') {
        post('addEventListener', 'play');
        post('addEventListener', 'pause');
        post('addEventListener', 'finish');
    }
}

// Play & Pause - no problem!
$('button').click(function() {
    post($(this).text());
});

if (window.addEventListener){
    window.addEventListener('message', onMessageReceived, false);
} else { // IE
    window.attachEvent('onmessage', onMessageReceived, false);
}