如何用jQuery点击暂停Vimeo视频及解决弹窗闪烁问题

一、关闭弹窗时暂停Vimeo视频 #

直接使用$('#video').trigger('pause')无法控制Vimeo视频，因为Vimeo iframe运行在独立的播放器环境中，必须通过官方的Vimeo Player API才能实现播放状态控制。

实现要点： #

1. 引入Vimeo Player API库（官方提供）和jQuery库
2. 初始化Vimeo播放器实例，绑定弹窗内的iframe
3. 在关闭弹窗的事件中调用API的pause()方法暂停视频

二、解决视频弹窗闪烁问题 #

当前代码逻辑是先显示弹窗再设置视频源，导致弹窗显示后视频才开始加载，从而出现闪烁。调整为先设置视频源，再显示弹窗，同时在关闭时清空视频源，避免重复加载时的闪烁。

修改后的完整代码： #

<article class="bgr_blogposts-post videoTag">
  <a href="#" class="show_video">Show Video</a> 
  <div class="bgr_blogposts-videosource">
    <iframe src="https://player.vimeo.com/video/135846546?h=482cfdfd90" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
  </div>                       
</article>

<div class="showvideo" style="display:none;">
  <div class="overlay"></div>
  <div class="vid-show">
    <span class="close">X</span>
    <iframe src="" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" id="video" allowfullscreen></iframe>  
  </div>
</div>

<!-- 引入jQuery库和Vimeo Player API库 -->
<script src="jquery.min.js"></script>
<script src="player.js"></script>
<script>
$(function () {
    "use strict";
    // 初始化Vimeo播放器实例
    const player = new Vimeo.Player('video');

    $(".videoTag").click(function (e) {
        e.preventDefault(); // 阻止a标签默认跳转行为
        const videoSrc = $(this).find("iframe").attr("src");
        // 先设置视频源，添加autoplay参数实现自动播放
        $("#video").attr("src", `${videoSrc}&autoplay=1`);
        // 再显示弹窗
        $(".showvideo").fadeIn();
    });
    
    $(".close, .overlay").click(function () {
        $(".showvideo").fadeOut();
        // 通过Vimeo API暂停视频
        player.pause().catch(err => console.error(err));
        // 清空视频源，避免下次打开时出现加载闪烁
        $("#video").attr("src", "");
    });
});
</script>

关键改动说明： #

• 视频暂停控制：通过Vimeo Player API初始化播放器实例，关闭弹窗时调用pause()方法，确保视频真正暂停，而非仅隐藏iframe。
• 闪烁问题修复：调整执行顺序，先设置视频源再显示弹窗；关闭弹窗时清空iframe的src，避免残留旧视频源导致的重复加载闪烁；阻止a标签默认跳转，避免页面锚点干扰。

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