javascript - 退出选项卡时暂停 HTML 视频

Question

我有一个带有选项卡的部分。两个选项卡都有一个视频。

唯一的问题是，我无法弄清楚，当我单击播放视频时，它会播放(这很好)，但是当我转到下一个选项卡时，初始视频仍将播放 - 我想要的是视频当我退出每个选项卡时暂停。

我尝试过使用函数，但就是无法让它工作。

谢谢!

$('ul.tabs li').click(function() {
    var tab_id = $(this).data('tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $(this).parent().parent().parent().children("#"+tab_id).addClass('current');
});

section {
	background: #fff;
}

ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
  background: #ccc;
}

.tab-link {
	background: none;
	color: #fff;
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	font-size: 16px;
}

.tabs .tab-link.current {
	background: #ccc;
}

.tab-content {
	display: none;
	background: #ccc;
}

.tab-content.current {
	display: block;
}

video {
	width: 100%;
	height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<section>
  <nav>
    <ul class="tabs">
      <li class="tab-link current" data-tab="first">
        <a href="#tab-1">One</a>
      </li>
      <li class="tab-link" data-tab="sec">
        <a href="#tab-2">Two</a>
      </li>
    </ul>
  </nav>
  <div id="first" class="tab-content current">
    <video controls>
      <source type="video/mp4" 
      src="http://techslides.com/demos/sample-videos/small.mp4">
    </video>
  </div>
  <div id="sec" class="tab-content">
    <video controls>
      <source type="video/mp4" 
      src="http://techslides.com/demos/sample-videos/small.mp4">
    </video>
  </div>
</section>

Answer 1

您可以简单地循环播放每个视频并在函数内暂停它。

信用:How can I pause ALL videos (html5) at once?

$('ul.tabs li').click(function() {
	$('video').each(function() {
		$(this).get(0).pause();
	});
	var tab = $(this).data('tab');

	$('ul.tabs li').removeClass('current');
	$('.tab-content').removeClass('current');

	$(this).addClass('current');
	$(this).parent().parent().parent().children("#"+tab).addClass('current');
});

section {
	background: #fff;
}

ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
  background: #ccc;
}

.tab-link {
	background: none;
	color: #fff;
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	font-size: 16px;
}

.tabs .tab-link.current {
	background: #ccc;
}

.tab-content {
	display: none;
	background: #ccc;
}

.tab-content.current {
	display: block;
}

video {
	width: 100%;
	height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<section>

		<nav>
			<ul class="tabs">
				<li class="tab-link current" data-tab="first">
					<a href="#tab-1">One</a>
				</li>
				<li class="tab-link" data-tab="sec">
					<a href="#tab-2">Two</a>
				</li>
			</ul>
		</nav>

		<div id="first" class="tab-content current">
			<video controls>
			  <source type="video/mp4" 
        src="http://techslides.com/demos/sample-videos/small.mp4">
			</video>
		</div>
		<div id="sec" class="tab-content">
			<video controls>
			  <source type="video/mp4" 
        src="http://techslides.com/demos/sample-videos/small.mp4">
			</video>
		</div>

</section>