2016-07-05 2 views
1

현재 "재생 버튼"으로 작동하는 embed youtube 비디오 및 이미지 오버레이가 포함 된 웹 페이지가 있습니다. JavaScript를 사용하여 삽입 비디오를 재생하고 사용자가 이미지 오버레이를 클릭하면 이미지를 숨 깁니다. 내가 아는 한, 유일한 방법은 "& autoplay = 1"을 YouTube 비디오의 URL에 추가하는 것입니다.뒤로 버튼을 눌렀을 때 iFrame이 자동 실행되지 않게하려면?

또한 사용자가 Google에 정보를 보내기 위해 제출할 수있는 양식이 웹 페이지에 있습니다. 양식이 올바르게 제출되면 사용자는 "감사합니다"페이지로 이동합니다. 문제는 사용자가 감사 페이지에서 뒤로 버튼을 누를 때 발생합니다. 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> 

답변

0

나는 gaetanoM의 도움으로 내 자신의 질문을 해결했습니다. 그의 대답은 그냥 "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"); 
    }); 
}); 
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"); 
    }); 
}); 
+0

나는이 뒤에 논리를 이해 제거하는 함수의 시작 부분에 iframe이의 SRC를 재설정하는 데 필요한 하나 개의 라인을 실종됐다, 괜찮다고 내가 검색 한 이 일을 시도 할 수있는 무언가; 그러나 이것은 작동하지 않습니다. 첫 번째 클릭에서 자동 재생이 이미 iFrame에 추가되었으므로 backButtonPressed == true 일 때 & autoplay = 1이 첫 번째 클릭에서 이미 iFrame에 추가 되었기 때문입니다. 뒤로 버튼은 새로 고침/다시로드하지 않습니다. – derks

관련 문제