关闭引导模式时 VideoJS 视频不会停止

Question

我的网站上有一个包含视频的模式。当我单击模态框（单击模态框外的背景、关闭按钮等）时，模态框已关闭，但视频仍在后台运行。

我已经测试了我在 stackoverflow 上找到的所有解决方案，但似乎没有任何效果。

这是我的 html（也许不是最好的代码）：

$('.modal').on('hidden.bs.modal', function() {
  $('video').each(function() {
    this.player.pause();
  });
})

<div class="modal fade" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModal" aria-hidden="true" style="z-index:99999;">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content" style="-webkit-box-shadow: 4px 4px 14px -2px rgba(0,0,0,0.75); -moz-box-shadow: 4px 4px 14px -2px rgba(0,0,0,0.75); box-shadow: 4px 4px 14px -2px rgba(0,0,0,0.75); min-width:750px !important">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"><img src="../images/logo.svg" height="60px"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4>Lorem ipsum!</h4>
        <p>Lorem ipsum.</p>
        <br>
        <center>
          <div style="width:500px;border-style:solid;border-color:#fafaf9">
            <video id="highlightfilter" class="video-js vjs-fluid" controls preload="auto" width="555" height="300" poster="../videos/tutorial_thumbnail.png" data-setup='{}'>
              <source src="../videos/tutorial.mp4" type="video/mp4">
            </video>
          </div>
        </center>
        <p>Some text... Text leads to a <a href="../link">link</a>.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我发现了不同的脚本，主要是这样的（我将代码放在结束 body 标记之前）：

$('.modal').on('hidden.bs.modal', function () {
    $('video').each(function() {
      this.player.pause();
    });
})

但没有任何效果...你有什么想法吗？

非常感谢！

于洛特

Answer 1

this.player 是一些 jquery 的东西？

我看到你在哪里遇到了问题，所以我展示了一个简单的例子。

另见https://www.w3schools.com/tags/av_met_pause.asp

document.querySelectorAll('video').foreEach(HTMLVideoElement.prototype.pause)

document.querySelectorAll('whatever').forEach(console.error)

如果您能进一步详细说明我的回答将如何帮助您，我会尝试改进它。