如何在按下后退按钮时防止iFrame自动运行？

我目前有一个嵌入式YouTube视频和图像叠加功能的“播放按钮”的网页。我使用JavaScript来播放嵌入视频，并在用户点击图像叠加层后隐藏图像。据我所知，唯一的方法就是将“& autoplay = 1”添加到youtube视频的网址中。如何在按下后退按钮时防止iFrame自动运行？

此外，我在网页上有一个表格，用户可以提交给我们信息。如果表单提交正确，它会将用户带到“谢谢”页面。问题出在用户点击谢谢页面的后退按钮时。由于我已将“&自动播放= 1”添加到iFrame，因此视频会继续播放。我试着通过在处理表单的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>

来源

2016-07-05 derks

我已经解决了我自己的问题，在gaetanoM的帮助下。他的回答很细，它只是缺少了IFRAME SRC的功能开始恢复需要一个线摆脱“&自动播放= 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"); 
    }); 
});

来源

2016-07-05 14:33:28 derks

如果后退按钮被按下，您可能发现：如果是不设置自动播放功能，您的视频。

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"); 
    }); 
});

来源

2016-07-05 13:58:12 gaetanoM

我明白这背后的逻辑，我正在寻找可能会试图做到这一点的东西;但是，这是行不通的。我认为这是因为自动播放已经在初始点击时添加到iFrame，所以即使当backButtonPressed == true时，在第一次点击时已经将＆autoplay = 1添加到iFrame。后退按钮似乎不会刷新/重新加载任何内容。 – derks

如何在按下后退按钮时防止iFrame自动运行？

回答

相关问题