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

尝试 select 元素在 iFrame 中（就像视频本身一样），我的 JS selector 似乎无法正常工作全部，也许是因为该视频来自我网站上未托管的单独来源？

这是我一直在使用的代码，但它似乎没有与 iFrame 交互，因为我认为我需要将此 eventListener 直接添加到视频中。但我似乎也无法通过 JS select 嵌入视频。所以我不太确定如何处理：

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>

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

Automatically Pause Embedded iFrame Vimeo Video at Specific Time?

html

javascript

video

iframe

vimeo