javascript - 在模态关闭时暂停本地视频

Question

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

一种解决方案是完全删除链接，因此如果再次点击视频将无法重播。其他各种形式的解决方案使视频停止 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再次。

下次启动模式时，src将再次设置，并循环重复。

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