在特定时间自动暂停嵌入iFrame Vimeo视频?

Question

我在我的网站上使用Vimeo视频嵌入(iFrame嵌入代码从他们的网站)，我需要视频自动停止在一个特定的时间戳(我将使用6秒在这里)每当我的网站的用户播放视频。时间戳后面的内容不需要。

但与YouTube不同的是，Vimeo似乎没有一种简单的方法来设置从他们嵌入的任何视频的结束时间。不幸的是，我不拥有视频，所以我不能直接编辑素材，所以我相信JavaScript解决方案是最好的选择。

这是我在我的网站上使用的Vimeo中提到的iFrame嵌入HTML:

<iframe id="vidz" src="https://player.vimeo.com/video/401649410?h=11d74aa27c&amp;portrait=0" width="450" height="253" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

在尝试选择元素iFrame(像视频本身)，我的JS选择器似乎不工作在所有，也许是因为视频是从一个单独的来源没有托管在我的网站?

这是我一直在使用的代码，但它似乎没有与iFrame交互，因为我相信我需要直接将这个eventListener添加到视频中。但我不能通过JS选择嵌入的视频，似乎。所以我不太确定如何处理这个:

var vid = document.querySelector("#vidz");
vid.addEventListener("timeupdate", function(){
if(t >= 6000) 
{
vid.pause();
}
});

我也可以为iFrame内的任何元素提供HTML，但是，我不确定如何与这些元素交互。

任何想法?任何和所有的帮助都将不胜感激。欢呼。

Answer 1

使用Vimeo js文件，下面是一个脚本，你想视频将暂停6分钟(具体时间)(360意味着6分钟)

<script src="https://player.vimeo.com/api/player.js"></script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
function foo() {

player.getCurrentTime().then(function(time) {
console.log('time:', time);
if(time >= 360){  
player.pause()
}
});
setTimeout(foo, 1000);
}
player.on('play', function() {
foo();
});
</script>