如何检查页面上的所有 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 个真。

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

我做错了什么？

谢谢！

Answer 1

关于闭包，您需要将变量绑定到您的元素。

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。