Pause/Stop Videos into Tabs When I Clicked on a Tab

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    tabcontent[i].querySelector("video").pause();
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent .video {
  width: 100%;
}

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <video controls>
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4"/>
  </video>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
  <video controls>
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4"/>
  </video>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
  <video controls>
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4"/>
  </video>
</div>

Pause HTML Video on exiting a tab

You can simply loop through each video and pause it inside of your function.

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

<script src="//www.youtube.com/iframe_api"></script>

<iframe width="510" height="287" src="//www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<script>
  $(function(){
    $('iframe[src*="//www.youtube.com/embed/"]').each(function(i) {
      this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
    });
  });
</script>

document.addEventListener("visibilitychange", function() {
    if (document.hidden){
        console.log("Browser tab is hidden")
    } else {
        console.log("Browser tab is visible")
   }
});