模式关闭时暂停本地视频

Question

我在 SO 上看到了一些类似问题的解决方案，但没有一个能满足我的需要。我有一个网页将显示在没有互联网连接的信息亭上，所以一切都是本地的。我所有的视频都在引导模式中，并且它们继续在模式关闭时播放。

一种解决方案会完全删除链接，因此如果再次单击该视频将无法重播。其他各种形式的解决方案将视频停止 1/2 秒，然后视频继续播放。

视频模式

    <!-- Modal Overview -->
  <div class="portfolio-modal modal fade" id="gal_overview" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Overview</h2>
              <div class="embed-responsive embed-responsive-16by9">
                      <iframe class="embed-responsive-item" src="video/overview.mp4" allowfullscreen></iframe></div>
                      <button class="btn btn-primary" data-dismiss="modal" type="button">
                        <i class="fas fa-times"></i>
                        Close Video</button>
                    </div>
                  </div>
                </div>
            </div>
          </div>
      </div>
    </div>

上次尝试的脚本

<script>
  $('.portfolio-modal').on('hide.bs.modal', function(e) {    
    var $if = $(e.delegateTarget).find('iframe');
    var src = $if.attr("src");
    $if.attr("src", '/empty.html');
    $if.attr("src", src);
  });
  </script>

当前代码将在页面加载时开始在后台播放所有视频。我确定我在这里遗漏了一些超级简单的东西。

Answer 1

有效答案：

由于 iframe 只是指向一个视频文件，您可以将 iframe 更改为 <video> 并更轻松地控制视频。

<video src="video/overview.mp4"></video>

然后可以使用视频元素上的.pause() 方法来实际暂停视频。

<script>
  $('.portfolio-modal').on('hide.bs.modal', function(e) {
    var $v = $(e.delegateTarget).find('video');
    $v[0].pause();  // use [0] because jQuery returns a list
  });
</script>

初步答案：

听起来你应该懒惰地应用 iframe 的 src 属性。所以当页面加载时，iframe 的src 属性应该是data-src。这样就不会播放视频了。

然后在$('.portfolio-modal').on('show.bs.modal') 上，将src 属性设置为data-src 的内容。视频将播放。

然后当模态框被隐藏时，再次将src替换为/empty.html。

下次启动modal时，src会再次设置，循环重复。

如果您真的想暂停视频而不是重置 iframe，那么this answer 应该会有所帮助。