在引导选项卡更改上暂停视频并停止上一个视频选项卡

Question

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

<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>

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

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

Answer 1

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<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>
    </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="https://www.quirksmode.org/html5/videos/big_buck_bunny.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="https://www.quirksmode.org/html5/videos/big_buck_bunny.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="https://www.quirksmode.org/html5/videos/big_buck_bunny.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="https://www.quirksmode.org/html5/videos/big_buck_bunny.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="https://www.quirksmode.org/html5/videos/big_buck_bunny.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) {
      $('.tab-pane:not(.active)').each(function(idx,el){
        var vid = $(this).find('video');
        if(!vid.paused)
        {
          vid.get(0).pause();
        }
      });
    });
  });
</script>