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>

然后可以使用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应该会有所帮助。

在模式关闭时暂停本地视频

1 个答案: