多弹窗场景下关闭弹窗/切换轮播时停止Vimeo视频的问题

我来帮你解决这个问题！你遇到的核心问题是原脚本会全局操作所有#nofocusvideo iframe，而且没有精准定位当前操作的弹窗/轮播容器，导致视频混乱和无法停止。咱们一步步来修复：

1. 重构停止视频函数，实现精准定位 #

原来的函数会全局查找所有匹配的iframe，这才是导致视频src混乱的根源。我们把它改成只针对传入的容器内的视频操作：

function stopVideo(container) { 
    // 仅在传入的容器范围内查找视频iframe，避免全局影响
    var $frame = $(container).find('iframe#nofocusvideo'); 
    if ($frame.length === 0) return; // 没找到对应视频就直接返回，避免报错
    
    var vidsrc = $frame.attr('src'); 
    // 重置src来停止视频，同时保留原地址确保下次打开能正常加载
    $frame.attr('src', ''); 
    $frame.attr('src', vidsrc); 
}

2. 修改点击事件，精准传递当前操作的容器 #

你之前用closest()没生效，大概率是因为传入的参数不对——closest()需要的是选择器字符串，不是jQuery对象。我们针对不同的操作场景，找到对应的上级容器：

// 轮播切换时，停止当前轮播内的视频
$(".carousel-control-prev, .carousel-control-next").click(function(){ 
    // 找到当前点击按钮所属的轮播容器
    var currentCarousel = $(this).closest('.carousel');
    stopVideo(currentCarousel); 
}); 

// 关闭弹窗时，停止当前弹窗内所有轮播的视频
$(".fa-times").click(function(){ 
    // 替换成你实际的弹窗容器类名（比如你自定义的.modal-popup之类的）
    var currentModal = $(this).closest('.modal'); 
    stopVideo(currentModal); 
});

额外优化：用Vimeo API更可靠控制视频 #

如果直接重置src的方式偶尔出现异常，推荐用Vimeo官方Player API来精准控制播放状态，体验更稳定：

1. 给每个Vimeo iframe添加data-vimeo-id属性：

<iframe id="nofocusvideo" data-vimeo-id="你的视频ID" src="https://player.vimeo.com/video/你的视频ID" frameborder="0"></iframe>

2. 引入Vimeo Player脚本（用CDN即可）：

<script src="https://player.vimeo.com/api/player.js"></script>

3. 修改stopVideo函数：

function stopVideo(container) { 
    $(container).find('iframe#nofocusvideo').each(function() {
        var player = new Vimeo.Player(this);
        // 调用API暂停视频，捕获异常避免控制台报错
        player.pause().catch(function(error) {
            console.log(error);
        });
    });
}

这样就能彻底解决视频混乱和无法停止的问题啦～

内容的提问来源于stack exchange，提问作者user4800977