Как я могу проверить, все ли видео 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));
}

Рабочий пример здесь . (добавлены опции при создании видеоплеера только для того, чтобы избежать дополнительных атрибутов 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;
    } );
}

Пример здесь .

Лучшее объяснение того, почему здесь .