我播放了 2 个视频并关闭 iFrame 后,浏览器上的“返回”按钮会播放没有视频的声音,如何解决?

坦率

在我的网站上 [现在位于: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>
坦率

好的,我想通了,只需进行以下更改:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章