如何在隐藏 Div 时停止 YouTube 视频

Question

我过去也提出过类似的问题，但我决定再试一次，因为从那时起我就转向了不同的方向。（我正在尝试使用 YouTube API，但没有取得任何进展）

我正在尝试建立一个网站，通过使用 hides/shows 不同 divs 的函数来显示不同的页面。其中一个页面有一个来自 YouTube 的视频，我试图找出一种方法来在隐藏相应的 div 时停止播放视频。现在，视频只是在后台播放（您可以听到声音），如果您换成另一个 page/div。

在互联网（即本网站）上进行了一些调查后，我终于找到了一个有效的解决方案，如下所示。

var stopButton = document.getElementById('fecharvideo');

stopButton.onclick = function() {
 var myPlayer = document.getElementById("player"); 
 myPlayer.setAttribute("src", " ");
};

不幸的是，正如您可能猜到的那样。这意味着在单击带有 id=fecharvideo 的元素后，iframe 就会消失，这意味着如果您 return 到 div 视频将不再出现，这不是理想。

对于这个问题，是否有任何类似的解决方案可以让我重置视频，而不是完全删除它？

这是fiddle（要测试它打开"Episódio 1"，开始视频，通过汉堡菜单打开"Episódios"，然后返回"Episódio 1"）：https://jsfiddle.net/Santos1600/qu8ejwsm/20/

Answer 1

解决方案：

html

<div id="ep1" class="ep1" style="display: none;">
  <div class="video-background">
    <div class="video-foreground">
      <iframe id="player" src="https://www.youtube.com/embed/videoseries?list=**PLAYLISTID**&modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&loop=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytplayer1" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
    </div>
  </div>
  <div class="container">

        <!--Menu/Episódio 1-->
          <div id="myNav2" class="overlayep">
              <div class="overlay-content">
                <ul>
                  <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','episodios'); toggleVideo(video1,'stopVideo');">EPISÓDIOS</a></li>
                  <ul><li><a href="#">POEMA MEDRICAS</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep2'); toggleVideo(video1,'stopVideo');">O CÃO</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep3'); toggleVideo(video1,'stopVideo');">TERAPIA À DISTÂNCIA</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep4'); toggleVideo(video1,'stopVideo');">MANIA DA PERSEGUIÇÃO</a></li>
                  </ul>
                  <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','sobre'); toggleVideo(video1,'stopVideo');">SOBRE</a></li></ul>
              </div>
            </div>
            <div class="botaomenu" onclick="myFunction(this); toggleNav2();">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
  </div>


  <a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','segunda'); toggleVideo(video1,'stopVideo');"><img src="assets/logohorizontal.png" alt="logo" class="logosmall"></a>
</div>
</div>

js

var video1 = document.getElementById('player')
function toggleVideo(a, state) { 
  var iframe = a.contentWindow;
  iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*'); 
}

如何在隐藏 Div 时停止 YouTube 视频

How to stop YouTube video when hidding a Div

html

javascript

youtube

video

iframe