0

我有一个客户端站点的一部分，其中包含多个 Vimeo 视频，可以在 Bootstrap 模态中启动，所以我正在研究 jQuery 需要在其模态启动时自动播放视频，并在其模态关闭时暂停它。

以下代码有效，但我意识到它不是很有效，并且没有任何运气试图让 for 循环工作。如果有人能够在这里“教我如何钓鱼”，那么我将来的效率会大大提高。

var idPlayer0 = new Vimeo.Player('player_0');

jQuery('#modal-0').on('shown.bs.modal', function (e) {
    idPlayer0.play();
});
jQuery('#modal-0').on('hidden.bs.modal', function (e) {
    idPlayer0.pause();
});

// And do it again...

var idPlayer1 = new Vimeo.Player('player_1');

jQuery('#modal-1').on('shown.bs.modal', function (e) {
    idPlayer1.play();
});
jQuery('#modal-1').on('hidden.bs.modal', function (e) {
    idPlayer1.pause();
});

// And so on...

我尝试了以下无济于事...

// get total number of iframes on page
var iframes = document.getElementsByTagName('iframe');

var idPlayer = [];
for (var i = 0; i <= iframes; i++) {
    idPlayer[i] = new Vimeo.Player('player_' + i);

    jQuery('#modal-' + i).on('shown.bs.modal', function (e) {
        idPlayer[i].play();
    });
    jQuery('#modal-' + i).on('hidden.bs.modal', function (e) {
        idPlayer[i].pause();
    });
}

非常感谢任何帮助。谢谢！

编辑

在 @ryan 和循环内的 JavaScript 闭包的帮助下，使用以下内容完成了这项工作——简单实用的示例。它不是最强大的解决方案，但它越来越接近。

jQuery( 文档 ).ready(function() {

// get total number of iframes on page
var iframes = document.getElementsByTagName('iframe').length;

var idPlayer = [];

for (let i = 0; i < iframes; i++) {

    idPlayer[i] = new Vimeo.Player(document.getElementById("player_"+[i]));

    jQuery('#modal-' + i).on('shown.bs.modal', function (e) {
        idPlayer[i].play();
    });
    jQuery('#modal-' + i).on('hidden.bs.modal', function (e) {
        idPlayer[i].pause();
    });
}

});

4

0 回答 0