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

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

How can I check if all vimeo videos on page were played on click of a button?

javascript

jquery

vimeo