点击切换视频时如何暂停之前播放的视频？技术求助

修改方案 #

在openVideo函数的隐藏tabcontent循环中添加暂停视频的代码，确保隐藏旧tab时立刻暂停其中的视频，无需等待新视频加载完成。

修改后的完整代码 #

<div class="tab">
      <button class="tablinks" onclick="openVideo(event, 'The Walls of Jerusalem')" id="defaultOpen">The Walls of Jerusalem</button> 
      <button class="tablinks" onclick="openVideo(event, 'The Queen of Elfland')">The Queen of Efland</button>
      <button class="tablinks" onclick="openVideo(event, 'The House About Kirk Michael')">The House About Kirk Michael</button> 
      <button class="tablinks" onclick="openVideo(event, 'Lost Lovers Waltz')"> Lost Lovers Waltz</button>
      <button class="tablinks" onclick="openVideo(event, 'I Am a Knight')"> I Am a Knight</button> 
</div>

  <script>
function openVideo(evt, videoName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them,同时暂停其中的视频
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    // 新增：暂停当前tab里的Vimeo视频
    const iframe = tabcontent[i].querySelector('iframe');
    if (iframe) {
      iframe.contentWindow.postMessage('{"method":"pause"}', '*');
    }
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(videoName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();

</script>

代码说明 #

• 新增代码放在隐藏tabcontent的循环内部，每次隐藏一个tab时，自动定位其中的视频iframe，通过postMessage向Vimeo播放器发送暂停指令。
• Vimeo原生支持JSON格式的指令控制，{"method":"pause"}是标准的暂停命令，'*'用于跨域名适配Vimeo播放器的域名限制。
• 该修改会在点击新tab的瞬间暂停所有旧视频，彻底解决延迟停止的问题。

内容的提问来源于stack exchange，提问作者user2597644