为同一页面上的多个视频添加 vimeo 事件侦听器答案

【问题标题】：Add vimeo event listeners for multiple videos on same page为同一页面上的多个视频添加 vimeo 事件侦听器
【发布时间】：2017-02-22 11:54:33
【问题描述】：

我在同一页面上有多个 Vimeo 视频 iframe。所以我想为所有 iframe 添加事件监听器。但不知何故，它对我不起作用。

这是我在 document.ready 上添加的代码。

 var iframes = document.querySelectorAll('iframe');

var player;
//loop through all and add event
    for (i = 0; i < iframes.length; i++) {
        // when vimeo player is ready add other events
        player = $f(iframes[i]);

        player.addEvent('ready', function () {         

            player.addEvent('play', onPlay);
            player.addEvent('pause', onPause);

        });

        function onPlay(el) {
            console.log('play');
        }

        function onPause(el) {
         console.log('pause');
        }

    }

我在变量“iframes”中获取所有 iframe，它还循环遍历所有并添加就绪事件。但不能添加播放和暂停事件。我哪里错了？

【问题讨论】：

标签： events iframe vimeo-api

【解决方案1】：

以下代码将帮助您将事件附加到框架。

<script>

    $(document).ready(function () {
        var x = document.querySelectorAll("iframe");
        var nodelist = x.length;
        alert(nodelist);

        for (i = 0; i < nodelist; i++) {

            var player = new Vimeo.Player(x[i]);

            player.on('play', function () {
                console.log('played the video!');
            });

            player.on('ended', function () {
                console.log('ended the video!');
            });
        }
    });

</script>

【讨论】：

为什么答案被否决了？这个对我有用。让我知道您面临的问题。
这行得通！只有我必须手动添加查询属性： api=1 和 player_id=videoUniqueId 到框架 src url 才能工作。

【解决方案2】：

实际上，我的问题中提到的多个视频播放/暂停问题已使用 froogaloop2.js 解决。正如我所讨论的那样，我现在没有为此编写任何额外的代码。我的 iframe src url 没有附加 api=1 参数。

【讨论】：