如何在按下后退按钮时防止iFrame自动播放?

时间:2016-07-05 13:35:05

标签: javascript jquery html iframe youtube

我目前有一个网页,其中嵌入了YouTube视频和图片叠加层,可用作播放按钮。"我使用JavaScript播放嵌入视频,并在用户点击图片叠加层时隐藏图片。据我所知,唯一的方法是添加"& autoplay = 1"到youtube视频的网址。

此外,我在网页上有一个表单,用户可以提交该表单以向我们发送信息。如果表单提交正确,则需要用户“谢谢”#34;页。问题出在用户点击感谢页面上的后退按钮时。因为我添加了"& autoplay = 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>

2 个答案:

答案 0 :(得分:0)

您可以检测是否按下了后退按钮:如果是,请不要为您的视频设置自动播放。

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

答案 1 :(得分:0)

我在gaetanoM的帮助下解决了我自己的问题。他的答案很好,只是在函数开始时缺少重置iFrame src所需的一行来摆脱“&amp; 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");
    });
});