javascript - 如何检查页面上的所有 vimeo 视频是否都是通过单击按钮播放的？

Question

(使用https://github.com/vimeo/player.js/)

我在一个页面上嵌入了 4 个 Vimeo 视频，并有一个用于移至下一页的按钮(下一页)。我希望用户只有在观看完所有 4 个视频后才能转到下一页。

我首先收集所有视频:var iframes = $('iframe.video');

然后我循环遍历它们以使用 vimeo api 并检查它们是否已播放:

var videos = [];
var videos_flags = [];
for( var i = 0 ; i < iframes.length ; i++ ) {
    videos[i] = new Vimeo.Player( iframes[i] );
    videos[i].on('play', function( data ) {
        videos_flags[i] = true;
    } );
}

最终，如果我执行 console.log(videos_flags )，无论我播放了多少视频，我都会得到 3 个空和 1 个 true。

$( '.next' ).on( 'click', function() {
    console.log( videos_flags );
} );

我做错了什么？

谢谢!

Answer 1

它与闭包有关，您需要将变量绑定(bind)到您的元素。

function bindValue (n, videos) {
    return function() {
        console.log(n)
        videos_flags[n] = true;
    }
}

for( var i = 0 ; i < iframes.length ; i++ ) {
    videos[i] = new Vimeo.Player( iframes[i], options );
    videos[i].on('play',  bindValue(i, videos_flags));
}

一个工作示例 here 。 (创建视频播放器时添加的选项只是为了避免播放器需要额外的属性 data-vimeo-id 或 data-vimeo-url，您不应该需要这些)

更好的解决方案 let (i 变量就是您需要更改的所有内容):

for( let i = 0 ; i < iframes.length ; i++ ) {
    videos[i] = new Vimeo.Player( iframes[i], options );
    videos[i].on('play', function( data ) {
        alert(i)
        videos_flags[i] = true;
    } );
}

示例 here .

更好地解释原因 here .