我有多个包含视频的引导程序选项卡。当我单击第一个选项卡并播放视频时。然后我转到下一个标签上一个视频没有停止。请帮我如何停止上一个标签页点击视频。
<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>
这也是我的代码和脚本，请告诉我我如何解决该问题。再次感谢。
我有多个包含视频的引导程序选项卡。当我单击第一个选项卡并播放视频时。然后我转到下一个标签上一个视频没有停止。请帮我如何停止上一个标签页点击视频。
答案 0 :(得分：0)
一种解决方案是获取所有未激活的选项卡窗格，然后检查视频是否暂停。如果没有，请暂停。
<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>