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>

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

1 个答案: