在特定时间自动暂停嵌入式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>