如何禁用嵌入Vimeo视频的循环播放并触发ended事件

问题根源 #

你加的loop=0参数没生效，不是自动播放规则的锅——Vimeo的URL参数优先级很低，而且如果视频在Vimeo后台开了循环，URL参数会直接被覆盖。另外，仅靠URL参数没法彻底禁用播放器的默认循环 fallback，导致ended事件根本触发不了。

解决步骤 #

别纠结URL参数了，直接用Vimeo Player API来控制，这是最靠谱的方式：

1. 引入Player SDK #

先在页面里加官方的SDK脚本，不然没法操控播放器：

<script src="https://player.vimeo.com/api/player.js"></script>

2. 初始化播放器并强制关闭循环 #

给iframe加个ID，然后用JS初始化播放器，明确设置loop: false，同时监听ended事件：

<body>
    <iframe id="my-vimeo-player" src="https://player.vimeo.com/video/717499153?muted=1&controls=0&autoplay=1" width="240" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="video"></iframe>

    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
        const player = new Vimeo.Player('my-vimeo-player', {
            loop: false
        });

        // 监听播放结束事件
        player.on('ended', () => {
            // 这里写你要执行的操作
            console.log('视频播完了！');
        });
    </script>
</body>

3. 额外检查：Vimeo后台设置 #

如果还是不行，登录Vimeo后台找到这个视频，进入「嵌入设置」，看看是不是开了循环选项——要是后台开了，不管你加什么参数都会循环，手动关掉就行。

关于自动播放的补充 #

你设置了muted=1，符合浏览器自动播放的静音要求，所以自动播放本身没问题，不会影响ended事件触发。

内容的提问来源于stack exchange，提问作者Wojtek Kochanowski