Vimeo 嵌入完成时显示元素

Posted 2023-03-13

【中文标题】Vimeo 嵌入完成时显示元素

【英文标题】：Show element when Vimeo embed finishes

【发布时间】：2013-12-09 03:15:07

【问题描述】：

我正在使用以下 sn-p 在我的页面上动态嵌入 Vimeo 视频：

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

我想显示一个包含相关视频的元素，但仅在嵌入视频完成时。我已经使用display:none 隐藏了该元素，当视频结束时，我想添加一个类来显示该元素。

这是我在点击触发器button 时用来播放视频的内容：

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/

【问题讨论】：

喜欢那里看看如何附加完成事件：jsfiddle.net/mottie/gxwex

@A.Wolff 感谢您的链接，这是我见过的更清晰的演示之一，但我仍然在努力克服比在跨度标签中打印“完成”更高级的东西。这是我的小提琴：jsfiddle.net/GxwEX/154

您在寻找什么？你可以做任何你想做的事情，只检查完成事件，例如：jsfiddle.net/GxwEX/155

@A.Wolff 我想在视频结束后为元素添加一个类，使用上面的优秀示例小提琴我现在已经完全得到了我需要的东西，非常感谢，就是这样我在网上看到的第一个适当的例子，用于 vimeo 嵌入的有意义的完成事件，在此处更新小提琴：jsfiddle.net/GxwEX/156

@A.Wolff P.S 如果您发布您的小提琴或我的最终小提琴作为答案，我很乐意接受，我相信其他人会对解决方案感兴趣

【参考方案1】：

最终代码：;)

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', onMessageReceived, false);

（你的）DEMO

【讨论】：

解决了！再次感谢您。