Question

以下是网站：http://neillieleadershipgroup.com/

在首页上，您会看到一个视频播放按钮。单击它打开包含视频的模态窗口。视频未设置为自动播放。关闭模态窗口时，视频中的音频将继续播放。

我花了几个小时研究这个，并且我尝试在页眉和页脚中添加了许多“bootstrap”模态视频javascript代码，到目前为止还没有任何工作。

我对javascript / jquery知之甚少，但我对HTML和CSS知之甚少。我搜索了网站的来源，但我似乎找不到这个模式背后的技术，即它是使用bootstrap还是其他东西 - 换句话说我找不到控制模态的脚本。

这是我已经读过的一篇文章并试图无济于事：
Play and stop Vimeo video placed in Bootstrap modal
与此相同：
Audio from vimeo video continues after modal has closed
还有很多其他人对我没有帮助。

这是创建模态的HTML：

<div class="fusion-modal modal fade modal-1 homepage-video in" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="false" id="homepage-video" style="display: block;">
 <div class="modal-dialog modal-lg">
  <div class="modal-content fusion-modal-content" style="background-color:#f6f6f6">
   <div class="modal-header">
    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 class="modal-title" id="modal-heading-1" data-dismiss="modal" aria-hidden="true" data-fontsize="28" data-lineheight="36"></h3>
   </div>
    <div class="modal-body">
     <iframe src="https://player.vimeo.com/video/151703999?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=player_1&amp;wmode=opaque" width="710" height="399" frameborder="0" allowfullscreen="allowfullscreen" id="player_1"></iframe>
    </div>
   </div>
  </div>
</div>

如果我能找到模态的JS，我也会提供它。

这是我尝试过的最新jquery（在模态关闭时停止播放视频），但这不起作用（添加到页眉和页脚）：

  videoSRC = $('iframe#player_1').attr('src');
   $('button.close').click(function () {
   $(' iframe#player_1').attr('src', videoSRC);
   });

   $('.homepage-video').on('hidden.bs.modal', function (e) {
   $(' iframe#player_1').attr('src', videoSRC);
   });

任何帮助深表感谢。谢谢！

Answer 1

您可以使用Vimeo JS API轻松完成。从此链接下载并上传player.js到您的wordpress主题文件夹：https://github.com/vimeo/player.js/blob/master/dist/player.min.js

上传后，你可以使用jquery这样发起这样的事件： -

jQuery(document).ready(function($) {

    var jqueryPlayer = new Vimeo.Player($('iframe#player_1'));

    $('.homepage-video').on('hidden.bs.modal', function (e) {
        jqueryPlayer.pause();
    });

});

它将解决您的问题。（y）

Avada模态Vimeo视频在关闭后继续播放

1 个答案: