gpt4 book ai didi

jquery - Vimeo 嵌入完成后显示元素

转载 作者:行者123 更新时间:2023-12-01 00:31:32 24 4
gpt4 key购买 nike

我使用以下代码片段在我的页面上动态嵌入 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())
})

我如何调整它以监听视频的结尾并显示元素?

这是一个基本的 fiddle ,详细说明了我迄今为止所拥有的内容: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', onMessageReceived, false);
}

(您的)DEMO

关于jquery - Vimeo 嵌入完成后显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20175392/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com