0

(using https://github.com/vimeo/player.js/)

I have 4 Vimeo embedded videos on a page and a button (next) to move to the next page. I would like to allow the user to move to the next page only after they have viewed all 4 videos.

I start by collecting all videos: var iframes = $( 'iframe.video' );

Then I loop through them to use the vimeo api and check if they were played:

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;
    } );
}

Eventually, if I do console.log( videos_flags ) I get 3 empty and 1 true no matter how many videos I have played.

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

What am I doing wrong?

Thanks!

odedta
  • 2,430
  • 4
  • 24
  • 51

1 Answers1

1

Its about closures, you need to bind the variable to your elements.

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));
}

A working example here. (added options when creating video player just to avoid the extra attributes data-vimeo-id or data-vimeo-url needed by the player, you should not need those)

An even better solution with let (the i variable is all you need to change):

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;
    } );
}

Example here.

A better explanaition of why here.

Ariel
  • 1,366
  • 7
  • 16
  • I knew I was missing some part but couldn't figure out what :-) I don't understand the second part of your solution with `let`. – odedta Nov 04 '18 at 11:49
  • let creates his own scope. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let – Ariel Nov 04 '18 at 11:53
  • So it was just a scope issue? Also, please note that you added options in your solution but you did not define it so if someone will be looking for this solution in the future it will not run. Thank you very much for the detailed answer and reference!!! – odedta Nov 04 '18 at 11:57