jquery – 当Vimeo嵌入完成时显示元素

我正在使用以下代码段动态地在我的页面上嵌入Vimeo视频：

<iframe id="singlepage"src="http://player.vimeo.com/video/<?PHP the_field('vimeo_id'); ?>?api=1&player_id=singlepage&color=ffffff" width="1000px" height="532px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

我想显示包含相关视频的元素,但仅在嵌入视频完成时才显示.我使用display：none隐藏了元素,当视频完成时我想添加一个类来显示该元素.

这是我点击触发按钮时用来播放视频的内容：

function post(e,t) {
    var n = {
        method: e
    };
    if (t) {
        n.value = t
    }
    f[0].contentwindow.postMessage(JSON.stringify(n),url)
}
var f = $("iframe"),url = f.attr("src").split("?")[0];
$("#play-video").click(function () {
    post("play")
});
$("button").on("click",function () {
    post($(this).text().toLowerCase())
})

我怎样才能调整它来监听视频的结尾并显示一个元素？

这是一个基本的小提琴,详细介绍了我到目前为止所拥有的内容：http://jsfiddle.net/GxwEX/154/

解决方法

最终代码：;)

function onMessageReceived(e) {
    var data = JSON.parse(e.data);

    if (data.event === 'ready') {
        post('addEventListener','play');
        post('addEventListener','pause');
        post('addEventListener','finish');
    } else if (data.event === 'finish'){
        $( ".related" ).addClass( "show" );
    }
}

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

(你的)DEMO