按下后退按钮时如何防止 iFrame 自动播放？答案

【问题标题】：How to keep an iFrame from autoplaying when hitting the back button?按下后退按钮时如何防止 iFrame 自动播放？
【发布时间】：2016-07-05 13:35:05
【问题描述】：

我目前有一个网页，其中嵌入了 youtube 视频和图像叠加层，用作“播放按钮”。我使用 JavaScript 播放嵌入视频并在用户单击图像叠加层时隐藏图像。据我所知，唯一的方法是将“&autoplay=1”添加到 youtube 视频的 url。

此外，我在网页上有一个表单，用户可以提交该表单以向我们发送信息。如果表单提交正确，它会将用户带到“谢谢”页面。问题出在用户从感谢页面点击后退按钮时。由于我在 iFrame 中添加了“&autoplay=1”，因此视频继续播放。我尝试通过在处理表单的 if/else 语句的 else 部分中回显 JavaScript 来重置 iFrame src。另外，我对此并不完全确定，但我认为后退按钮会触发 .click() 方法，所以我不确定如果它将所有内容都视为按钮单击，我将如何防止这种情况发生。我已经坚持了很长一段时间，并希望有一些可能的方向。我也开始相信我想要达到的目标可能并不完全可能。

相关代码：

<?PHP
    if(isset($_POST['submit'])) {
        if($error) { 
            // handle form error
        }
        else {
            // mails the form
            header("location:http://mywebsite.com/thank-you");
        }
    }
?>

<html>
    <body>
        <div id="video-thumbnail">
            <img id="video-image" src="norman.png" class="video-image" alt=""/> 
            <iframe id="video-embed" class="video-embed" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&loop=1&showinfo=0" s8011508427261248624="true" replaced="true" ></iframe>
        </div>

       <script>
           (function($){
               $(document).ready( function(){
                   $(".video-image").click(function(){
                   $(".video-embed").css({"opacity":"1","display":"block"});
                   $(".video-embed")[0].src += "&autoplay=1";
                   $(this).unbind("click");
                   });
               } );
           })(jQuery)
       </script>

    </body>
</html>

【问题讨论】：

标签： javascript jquery html iframe youtube

【解决方案1】：

您可以检测是否按下了返回按钮：如果是，请不要为您的视频设置自动播放。

var backButtonPressed = false;

$(function () {
  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function () {
      backButtonPressed = true;
    });
  }

  $(".video-image").click(function () {
    $(".video-embed").css({"opacity": "1", "display": "block"});

    // test if back button pressed
    if (backButtonPressed == false) {
      $(".video-embed")[0].src += "&autoplay=1";
    }
    $(this).unbind("click");
  });
});

【讨论】：

我理解这背后的逻辑，我正在寻找可能尝试这样做的东西；但是，这不起作用。我认为这是因为在第一次点击时自动播放已经添加到 iFrame 中，所以即使 backButtonPressed == true，&autoplay=1 已经在第一次点击时添加到 iFrame 中。后退按钮似乎没有刷新/重新加载任何内容。

【解决方案2】：

在 gaetanoM 的帮助下，我已经解决了自己的问题。他的回答很好，只是缺少在函数开始时重置 iFrame src 以摆脱“&autoplay=1”

所需的一行

var backButtonPressed = false;

$(function () {
   $(".video-embed")[0].src = "https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&loop=1&showinfo=0";
   if (window.history && window.history.pushState) {

   window.history.pushState('forward', null, './#forward');

   $(window).on('popstate', function () {
     backButtonPressed = true;
   });
 }

$(".video-image").click(function () {
    $(".video-embed").css({"opacity": "1", "display": "block"});

    // test if back button pressed
    if (backButtonPressed == false) {
      $(".video-embed")[0].src += "&autoplay=1";
    }
    $(this).unbind("click");
    });
});

【讨论】：