MediaElement.js + enthüllen JQuery Modal: So pause Video/Audio auf ×

Question

Wie mache ich gleichzeitig den Spieler an und beantragte das enthaltende Modal auf, um zu rutschen/weg "zu" unreveal ")?

Gegenwärtig wurde nach dem Spiel der Wiedergabetaste geklickt und der obere linke (x) des Modals ... wird auf das Modal entfernt, aber das Video wird weiter gespielt. Um dies zu vermeiden, muss der Benutzer: 1) das Video pausieren und dann 2) das Modal schließen. Ich hätte gerne einen Klick oder tippen Sie auf eines der Auslöser des Modals-zum Beispiel auf (x)-, um beide Aktionen gleichzeitig auszuführen. Ich versuche eine Lösung zu finden, die über Plattformen / Geräte hinweg funktioniert.

Hier ist, was ich so weit habe, was nicht funktioniert ...

Im Kopf von DOM zwischen Skript -Tags

      document.getElementById("pauseX").onclick = function () {
      document.getElementById('player2').pause();
      };

Auslöser, um Modal zu enthüllen

   <a href="#" data-reveal-id="vid-1">Click here to reveal modal.</a>

Video + Modalbehälter

   <div id="vid-1" class="reveal-modal">
       <div class="center">
           <video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
               <source type="video/mp4" src="../media/vid-1-480x320.mp4" />
               <source type="video/webm" src="../media/vid-1-640x480.webm" />
               <object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">         
                   <param name="movie" value="../build/flashmediaelement.swf" /> 
                   <param name="flashvars" value="controls=true&amp;file=../media/vid-1-480x320.mp4" />         
                   <img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1" 
        title="No video playback. Update browser, enable Javascript, or install Flash." />
               </object>    
           </video>
          </div>
          <a id="pauseX" class="close-reveal-modal">&#215;</a>
   </div>

Auch viele andere Lösungen ausprobiert, einschließlich ...

JavaScript, um die HTML5 -Videowiedergabe im Modal Fenster schließen zu stoppen

... also wird jede Hilfe geschätzt. Ich denke, es ist möglich, dass die Datei mediaElement.js oder enthüllt.js möglicherweise optimiert werden muss oder so?

Wenn Sie übrigens überall außerhalb des Modals-IE, auf dem "Glanz" klicken, wird es dazu gebracht, auf dem "Glanz" zu rutschen/weg. Das Schlagen der Escape -Taste auf der Tastatur macht dasselbe. Wenn Sie überall auf dem Video -Player klicken, wird es innehalten. Ich würde es lieben, wenn all diese Funktionen zusammen mit dem Tippen auf mobile Geräte aufbewahrt würden. (Ich habe das noch nicht getestet.)

Answer 1

Hat es mit diesem Skript gelöst ...

<script>
    $('.close-reveal-modal').click(function() {
        $('video, audio').each(function() {
            $(this)[0].player.pause();        
        });
    });
</script>

Auf jeder Seite gab es mehrere Medien.js -Videos (eines für jedes potenzielle Modal) ... Jedes Video wurde mit demselben ID = "Player2" -attribut identifiziert ... das auch die Seite vom Validieren verhindern. Ich habe versucht, dies in meinem ursprünglichen Skript von GetelementById zu GetElementByName zu wechseln ... hat nicht funktioniert. Erstellte eine Klasse anstelle einer ID für jeden Spieler ...das hat nicht funktioniert. Unabhängig von den Validierungsproblemen: Die oben genannte Lösung-einfach die .Close-Reveal-Modal-Klasse direkt in das Skript "All" für MediaElement.js funktioniert großartig. (Danke @Fabrizio für die Vorschläge, dass ich meine ID -Attribute zunächst mit ...) untersuche.)

Answer 2

Wenn Sie haben document.getElementById("pauseX").onclick... Im oberen Rand Ihres Dokuments funktioniert der Code wahrscheinlich nicht, weil Element mit ID ein Element ist pauseX ist noch nicht auf dem DOM. Schauen Sie sich die JavaScript -Konsole an, Sie sollten einen verwandten Fehler sehen

Versuchen Sie, diese Anweisungen am unteren oder auf DOM -Ready -Event zu verschieben