Javascript-更改到其他选项卡时暂停视频（在同一页面上）

所以我有3个标签的设置与此非常相似，但每个标签下的内容都是不同的视频（HTML）。我的问题是，更改选项卡后，上一个选项卡中的视频/音频将继续播放，除非我在切换选项卡之前暂停视频。对于类似的问题，我尝试了几种不同的解决方案，但仍然找不到一种在我的页面上有效的解决方案

这是我的HTML-

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

蜜蜂
蟹
乌鸦

以下是我尝试过的一些不同的解决方案- #1-我一直想说的主要问题是- #2 - #3-我试着看看是否有办法将空格键切换到单击此空格键上的任意位置-

---

我还是JS的新手，所以非常感谢您的帮助和建议！谢谢大家!

单击其中一个选项卡时，您可以暂停所有视频：

函数openCity（evt，cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

正文{
字体系列：Arial；
}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
.tabcontent.video{
宽度：100%；
}

选项卡
单击选项卡式菜单内的按钮：

伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都

东京
东京是日本的首都

您需要向我们展示您尝试过的不同解决方案，以便获得答案。