Question

我在一个页面上有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

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

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。

如何查看页面上的所有vimeo视频是否都单击按钮即可播放？

1 个答案: