I have a page that has a reserved iframe for the player at the start, and below i have a list of videos.
when you click in one of the videos it gets loaded onto the "player" at the top with a js function, the same function creates the vimeo.Player object and then binds an on(timeupdate) that procs an ajax when the video hits a percentage of 90%.
the problem: the first time you select a video everything works the way it should, but when u select another it either doesn't add the listener or doesnt create the Player.
order goes like this: function aux -> ver() -mostly display stuff and src update on iframe id -> creates new Vimeo.Player at the end
function aux(element) {
var player = ver(element),
cod = element.id;
console.log('code: ' + cod);
player.on('timeupdate', function(data) {
console.log('upd');
if (data.percent > 0.9) {
console.log('90');
$.ajax({
type: "POST",
url: "ajax.markvideo.php",
data: {
code: cod,
email: <?php echo '"' . $_SESSION['email'] . '"' ?>
}
}).done(function(msg) {
player.off('timeupdate');
});
}
});
}
i've tried to empty the iframe by textcontent or child removing because that seems to be the only thing that changes, but neither of them did anything.
using the api loadVideo() instead of changing the iframe src directly did the job.