Javascript 在引导选项卡更改时暂停视频，同时停止上一个视频选项卡

我有多个有视频的引导标签。当我点击第一个标签并播放视频时。然后我转到下一个选项卡，上一个视频不会停止。请帮助我如何停止上一个选项卡单击视频

<div class="container">
  <!--<h3>A basic demo of Bootstrap Tabs</h3>-->

  <div class="col-md-6">

    <div class="tabs_li">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="#javatab" role="tab" data-toggle="tab">2nd</a></li>
        <li><a href="#csharptab" role="tab" data-toggle="tab">3rd</a></li>
        <li><a href="#mysqltab" role="tab" data-toggle="tab">4th</a></li>
        <li><a href="#jquerytab" role="tab" data-toggle="tab">5th</a></li>

      </ul>
      </li>
    </div>

  </div>

  <div class="col-md-6">
    <div class="tabs_div">
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="hometab">

          <div class="myVideo myvideoone">
            <video width="457" height="447" controls>
                              <source src="Videos/video1.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>


          </div>

        </div>


        <div class="tab-pane" id="javatab">
          <div class="myVideog myvideotwo">
            <video width="457" height="447" controls>
                              <source src="Videos/video2.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>


        </div>


        <div class="tab-pane" id="csharptab">

          <div class="myVideog myvideothree">
            <video width="457" height="447" controls>
                              <source src="Videos/video3.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>

        </div>
        <div class="tab-pane" id="mysqltab">

          <div class="myVideog">
            <video width="457" height="447" controls>
                              <source src="Videos/video4.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>

        </div>
        <div class="tab-pane" id="jquerytab">

          <div class="myVideog">
            <video width="457" height="447" controls>
                              <source src="Videos/video5.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>

        </div>

      </div>
    </div>

  </div>

</div>






<script type="text/javascript">
  $(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var $video = $(e.relatedTarget.hash).find('video');
      $video.each(function(index, video) {
        $(video).attr("src", $(video).attr("src"));
      });
    });
  });
</script>

您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
$（函数（）{
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
var$video=$（e.relatedTarget.hash）.find（'video'）；
$video.each（功能（索引、视频）{
$（video.attr（“src”），$（video.attr（“src”）；
});
});
});

这是我的代码和脚本，请告诉我如何解决这个问题。再次感谢

---

我有多个有视频的引导标签。当我点击第一个标签并播放视频时。然后我转到下一个选项卡，上一个视频不会停止。请帮助我如何停止上一个选项卡单击视频。

一个解决方案是获取所有未激活的选项卡窗格，并检查视频是否暂停。如果没有，则暂停

<div class="container">
  <!--<h3>A basic demo of Bootstrap Tabs</h3>-->

  <div class="col-md-6">

    <div class="tabs_li">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="#javatab" role="tab" data-toggle="tab">2nd</a></li>
        <li><a href="#csharptab" role="tab" data-toggle="tab">3rd</a></li>
        <li><a href="#mysqltab" role="tab" data-toggle="tab">4th</a></li>
        <li><a href="#jquerytab" role="tab" data-toggle="tab">5th</a></li>

      </ul>
      </li>
    </div>

  </div>

  <div class="col-md-6">
    <div class="tabs_div">
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="hometab">

          <div class="myVideo myvideoone">
            <video width="457" height="447" controls>
                              <source src="Videos/video1.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>


          </div>

        </div>


        <div class="tab-pane" id="javatab">
          <div class="myVideog myvideotwo">
            <video width="457" height="447" controls>
                              <source src="Videos/video2.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>


        </div>


        <div class="tab-pane" id="csharptab">

          <div class="myVideog myvideothree">
            <video width="457" height="447" controls>
                              <source src="Videos/video3.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>

        </div>
        <div class="tab-pane" id="mysqltab">

          <div class="myVideog">
            <video width="457" height="447" controls>
                              <source src="Videos/video4.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>

        </div>
        <div class="tab-pane" id="jquerytab">

          <div class="myVideog">
            <video width="457" height="447" controls>
                              <source src="Videos/video5.mp4" type="video/mp4">
                              Your browser does not support the video tag.
                            </video>
          </div>

        </div>

      </div>
    </div>

  </div>

</div>






<script type="text/javascript">
  $(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var $video = $(e.relatedTarget.hash).find('video');
      $video.each(function(index, video) {
        $(video).attr("src", $(video).attr("src"));
      });
    });
  });
</script>

您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。
$（函数（）{
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
$（'.tab窗格：非（.active'）。每个（函数（idx，el）{
var vid=$（this.find（'video'）；
如果（！vid.暂停）
{
vid.get（0.pause（）；
}
});
});
});

能否在JSFIDLE、codesandbox或堆栈溢出可运行脚本中提供完整的代码？