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

时间:2017-02-22 11:54:34

标签: events iframe vimeo-api

我在同一页面上有多个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&#39;中获取了所有iframe,它还遍历所有iframe并添加ready事件。但无法添加播放和暂停事件。我哪里错了?

2 个答案:

答案 0 :(得分:0)

实际上我的问题中提到的多个视频播放/暂停问题已经使用froogaloop2.js解决了。我现在没有按照我的指示编写任何额外的代码。和我的iframe src url不附加api = 1 param。

答案 1 :(得分:-1)

The following code would help you with attaching events to your frames.

<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>