退出标签

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

更改标签后，暂停并将视频currentTime设置为零。

video.get(0).pause();
video.get(0).currentTime = 0;

您不需要迭代每个视频，只需获得current类的视频。

见下面的代码：

$('ul.tabs li').click(function() {
  var tab_id = $(this).data('tab');
  
  resetVideo();
  
  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');

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

function resetVideo() {
  var $video = $('.tab-content.current video');
  $video.get(0).pause();
  $video.get(0).currentTime = 0;
}

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 2

为了停止视频，您可以使用原生停止方法，如果只有两个视频，您可以停止隐藏的视频：

$("video").not(":visible").get(0).stop();

如果您需要使用ID，检测正在打开的标签并在其他标签中停止视频，则可以调整此响应。

编辑：您还可以在更改标签后使用此代码停止所有视频：

$("video").each(function(i,video){video.stop()});

Answer 3

您可以直接浏览每个视频并将其暂停在您的功能中。

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

＆＃13;

＆＃13;

$('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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;