Graduate Assignment 3

by Larry Adams

HTML

<br>
<h1>Graduate Assignment 3</h1>

<br>

<iframe width="560" height="315" src="https://www.youtube.com/embed/Zu3VwANi674?list=PL4F8B2ACDA938ABB0" frameborder="0" allowfullscreen></iframe>
    <p><a href="#">Judith Durham Danny Boy</a> from <a href="#https://www.youtube.com/watch?v=Zu3VwANi674&list=PL4F8B2ACDA938ABB0">Great Irisih Singers</a>.</p>
<br>
Video status: <span>...</span><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 buttons
$('button').click(function() {
    post($(this).text());
});

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