Wie kann ich verhindern, dass ein iFrame beim Drücken der Zurück-Taste automatisch abgespielt wird?

Ich habe derzeit eine Webseite mit einem YouTube-Video und Bild-Overlay, das als "Play-Button" fungiert. Ich verwende JavaScript, um das eingebettete Video abzuspielen und das Bild auszublenden, sobald ein Benutzer auf das Bild-Overlay klickt. Soweit ich weiß, ist der einzige Weg dies zu tun, "& autoplay = 1" zu der URL des YouTube-Videos hinzuzufügen.Wie kann ich verhindern, dass ein iFrame beim Drücken der Zurück-Taste automatisch abgespielt wird?

Zusätzlich habe ich ein Formular auf der Webseite, das der Benutzer senden kann, um uns Informationen zu senden. Wenn das Formular korrekt übermittelt wird, führt es den Benutzer zu einer "Danke" -Seite. Das Problem liegt vor, wenn der Benutzer auf der Dankeseite auf die Zurück-Schaltfläche klickt. Da ich dem iFrame "&autoplay = 1" hinzugefügt habe, wird das Video weiter abgespielt. Ich habe versucht, den iFrame-Quellcode zurückzusetzen, indem ich JavaScript im else-Teil der if/else-Anweisung widerspiegelt, die das Formular behandelt. Außerdem bin ich mir da nicht ganz sicher, aber ich denke, dass der Zurück-Button die .click() -Methode auslöst, also bin ich mir nicht sicher, wie ich das verhindern würde, wenn es alles wie ein Knopfklick behandelt. Ich bin seit einiger Zeit daran fest und würde eine mögliche Richtung zu schätzen wissen. Ich fange auch an zu glauben, dass das, was ich erreichen möchte, möglicherweise nicht vollständig möglich ist.

Relevante Code:

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

Quelle

2016-07-05 derks

Ich habe meine eigene Frage gelöst, mit Hilfe von GaetanoM. Seine Antwort war in Ordnung, es war nur eine Zeile benötigt fehlt das iFrame src zu Beginn der Funktion zum Zurücksetzen loswerden „& runter = 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"); 
    }); 
});

Quelle

2016-07-05 14:33:28 derks

Sie erkennen können, wenn Zurück-Taste gedrückt worden ist: wenn ja nicht runter, um Ihr Video eingestellt.

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

Quelle

2016-07-05 13:58:12 gaetanoM

ich die Logik dahinter verstehen und ich war auf der Suche nach etwas, das versuchen könnte, dies zu tun; Dies funktioniert jedoch nicht. Ich denke, das liegt daran, dass das Autoplay beim ersten Klick bereits zum iFrame hinzugefügt wurde. Selbst wenn backButtonPressed == true, wurde & autoplay = 1 bereits beim ersten Klick zum iFrame hinzugefügt. Die Zurück-Schaltfläche scheint nichts zu aktualisieren/neu zu laden. – derks

Wie kann ich verhindern, dass ein iFrame beim Drücken der Zurück-Taste automatisch abgespielt wird?

Antwort

Verwandte Themen