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

Question

我过去曾提出过类似的问题，但我决定再试一次，因为从那以后我朝着不同的方向前进。 (我正在尝试使用 YouTube API，但没有得到任何结果)

我正在尝试建立一个网站，通过使用隐藏/显示不同的功能来显示不同的页面divs .其中一个页面有来自 YouTube 的视频，我试图找出一种方法来停止视频，当相应的 div是隐藏的。现在，如果您切换到另一个页面/div，视频只会在后台继续播放(您可以听到声音)。

在互联网上(即这个网站)进行了一番调查之后，我终于得到了一个如下的解决方案。

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

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

不幸的是，您可能已经猜到了。这意味着在单击带有 id=fecharvideo 的元素后, iframe只是消失了，这意味着如果你回到那个 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":""}', '*'); 
}