Javascript - Pause video when changing to another tab (on the same page)

Question

So I have 3 tabs set up pretty much exactly like this - https://www.w3schools.com/howto/howto_js_tabs.asp - but the content under each tab is a different video (HTML). My problem is that after changing tabs, the video/audio from the previous tab continues to play - unless I pause the video prior to switching tabs. I've tried a few of the different solutions I've seen for problems similar to this, but still can't find a solution that works on my page.

Here is the HTML I have -

<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'BEE')" id="defaultOpen">BEE</button>
<button class="tablinks" onclick="openCity(event, 'CRAB')">CRAB</button>
<button class="tablinks" onclick="openCity(event, 'CROW')">CROW</button>
</div>

<!-- Tab content -->
<div id="BEE" class="tabcontent">
 <div class="video">
  <video width="852" height="480" controls>
    <source src="bee.mov" type="video/mp4">
  </video> 
</div>
</div>

<div id="CRAB" class="tabcontent">
 <div class="video">
  <video width="852" height="480" controls>
    <source src="crab.mov" type="video/mp4">
  </video> 
 </div>
</div>

<div id="CROW" class="tabcontent">
 <div class="video">
  <video width="852" height="480" controls>
    <source src="crow.mov" type="video/mp4">
  </video> 
 </div>
</div>

Here are some of the different solutions I've tried - #1 - The main one I keep coming back to - Pause/stop videos into tabs when I clicked on a tab #2 - How to pause a video when another video's play button is clicked #3 - I've tried to see if there's a way I could switch the space bar to clicking anywhere on this one - https://teamtreehouse.com/community/hi-how-can-i-make-the-video-startstop-by-clicking-anywhere-on-the-video-icon-instead-of-targeting-the-play-button

I'm still very new to JS so any help or suggestions are very much appreciated! Thank you!

You need to show us the different solutions you have tried in order to expect an answer. — Wais Kamal, May 25 '21 at 06:38

score 0 · Accepted Answer · answered May 25 '21 at 07:01

You can pause all videos when one of the tabs is clicked:

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>

Javascript - Pause video when changing to another tab (on the same page)

1 Answers1