Question

在我的网站上[现在位于：http://gatecybertech.com/test，但是稍后将移至主站点：http://gatecybertech.com]，我之后，您可以单击右上方的“视频”链接转到视频部分播放了几个剪辑并关闭了iFrame，如果我单击浏览器上的“后退”按钮，将再次播放最后一个视频，但是奇怪的是：我可以听到声音，但是看不到视频？那么如何通过实现以下一项解决问题：

[1]在iFrame中再次显示视频并正常播放

或

[2]不播放声音也不显示视频

以上任何一种都可以。我该如何实现？

我的html看起来像这样：

            <div class="tools-icon">
              <a href=https://www.youtube.com/embed/IgBIaZgoAQc?autoplay=1 target=_blank data-target="modal" data-video-title="Keypad Pins Easily Stolen"><img src=https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg width=170 height=110></a>
              <p class="tools-icon__text">Keypad Pins Easily Stolen</p>
            </div>

...

  <!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->

    <div id="modal" tabindex="-1">
      <div class="content">
        <h4 class="title"></h4>
        <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>

      <div class="black_overlay" onclick="closeLightBox()" style="display: block;">
        <div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
          <a class="close" onclick = "return close_iFrame();"><h2>&times;</h2></a>
        </div>
      </div>
    </div>

脚本看起来像这样：

<script>
  var modal = document.getElementById('modal'), 
      closeBtn = modal.querySelector('close'), 
      ytVideo = modal.querySelector('.content .yt-video'), 
      title = modal.querySelector('.content .title'), 
      anchors = document.querySelectorAll('a[data-target="modal"]'), 
      l = anchors.length;

  for (var i = 0; i < l; i++)
  {
    anchors[i].addEventListener("click", function(e)
    {
      e.preventDefault();
      title.textContent = this.dataset.videoTitle || 'No title';
      ytVideo.src = this.href;
      modal.classList.toggle('is-visible');
      modal.focus();
    });
  }

  modal.addEventListener("keydown", function(e)
  {
    if (e.keyCode == 27)
    {
      title.textContent = '';
      ytVideo.src = '';
      this.classList.toggle('is-visible');
    }
  });
</script>

<script language="javascript" type="text/javascript">
  function close_iFrame()
  {
    var modal = document.getElementById('modal'), 
                ytVideo = modal.querySelector('.content .yt-video'); 
                ytVideo.src = '';
                modal.classList.toggle('is-visible');
  }
</script>

Answer 1

好，我知道了，只需进行以下更改：

<script language="javascript" type="text/javascript">
  function close_iFrame()
  {
    var modal = document.getElementById('modal'), 
                ytVideo = modal.querySelector('.content .yt-video'); 
                ytVideo.src = '';
                modal.classList.toggle('is-visible');
    history.go(-1);
    window.location.href = '#Videos';
  }
</script>

在播放2个视频并关闭iFrame之后，浏览器上的“后退”按钮将播放无视频的声音，如何解决？

1 个答案: