Приостановить видео на вкладке Bootstrap Change, а также остановить предыдущую вкладку видео

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>