Stoppen Sie das Video von der Wiedergabe

Ich habe zwei Videos auf der gleichen Seite und sie öffnen in einem Iframe. Wenn ich das Popup schließe, wird das Video nicht gestoppt. Es spielt weiter. Aufgrund von Umständen, die außerhalb meiner Kontrolle liegen, muss ich mit den Videos innerhalb von iframes arbeiten.Stoppen Sie das Video von der Wiedergabe

Könnte jemand helfen, unter dem Code für das gleiche ist:

jQuery:

$("[data-media]").on("click", function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    var videoUrl = $this.attr("data-media"); 
    var popup = $this.attr("href"); 
    var $popupIframe = $(popup).find("iframe"); 

    $popupIframe.attr("src", videoUrl); 



    var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
    var left = left/2 - 340; 

    var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
    var top = top/2 - 180; 

    document.getElementById("vid").style.top = top + "px"; 
    document.getElementById("vid").style.left = left + "px"; 
    document.getElementById("vid1").style.top = top + "px"; 
    document.getElementById("vid1").style.left = left + "px"; 

    $this.closest(".page").addClass("show-popup"); 
}); 

$(".popup").on("click", function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    $(".page").removeClass("show-popup"); 
}); 

$(".popup > iframe").on("click", function(e) { 
    e.stopPropagation(); 
});

HTML:

<div class="popup" id="media-popup"> <!-- video embedded --> 
       <iframe id="vid" src="http://player.vimeo.com/video/1212121210?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
       <iframe class="show-2" style="display: none;" id="vid1" src="http://player.vimeo.com/video/112324343?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
       <a class="video-close" href="#0"></a> 
      </div><!-- popup --> 


<a id="video" data-media="//www.vimeo.com/134243242">video 1</a> 
<a id="video" class="video-2" data-media="//www.vimeo.com/00102102">Video 2</a>

Quelle

2017-01-04 Bob

Mögliche doppelte: http://stackoverflow.com/questions/13598423/stop-all-playing-iframe- videos-on-click-a-link-javascript –

Wenn möglich, würde ich auch vorschlagen, dass du 'video' Elemente verwendest, anstatt die' src' des 'iframe' direkt auf das Video zu setzen, da du dadurch viel mehr Kontrolle hast - du Holen Sie die Methode 'pause()' für eins. –

@RoryMcCrossan können Sie bitte ein Beispiel teilen? das könnte mir helfen. – Bob

http://plnkr.co/edit/BWPfY8PiYagfb1zIHUEV?p=previ ew

Diese Plunker mir geholfen, die Lösung auf meine Frage zu erreichen.

HTML:

<head> 
    <title>Autostop Videos in Closed Modal</title> 

    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> 
    <link rel="stylesheet" href="style.css"> 

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Autostop Videos in Closed Modal</h1> 

    <ul class="nav" > 
     <li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li> 
     <li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li> 
    </ul> 

    <div class="modal fade" id="video1"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" > 
       <span aria-hidden="true">&times;</span> 
      </button> 
      <h4 class="modal-title">Video 1</h4> 
      </div> 

      <div class="modal-body"> 

      <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

      </div> 
     </div> 
     </div> 
    </div> 

    <div class="modal fade" id="video2"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" > 
       <span aria-hidden="true">&times;</span> 
      </button> 
      <h4 class="modal-title">Video 2</h4> 
      </div> 

      <div class="modal-body"> 

      <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

      </div> 
     </div> 
     </div> 
    </div> 

    </body> 

</html>

JS:

$(function(){ 
    $('.modal').on('hidden.bs.modal', function (e) { 
    $iframe = $(this).find("iframe"); 
    $iframe.attr("src", $iframe.attr("src")); 
    }); 
});

Quelle

2017-01-05 15:50:18 Bob

Dies wird 'Reset' das src Attribut für jeden iframe, Anhalten des Videos

Sie können auch Folgendes ausführen, wenn sich der Iframe in Ihrer Domäne befindet.

jQuery('iframe').contents().find('video').each(function() 
    { 
     this.pause(); 
    }); 
    jQuery('video').each(function() 
    { 
     this.pause(); 
    });

Quelle

2017-01-04 16:50:29

Dies tut nichts für ich @ Bryant – Bob

Das half mir, check it out!

Grundsätzlich müssen Sie Iframe oder Video verwenden, um Player zu starten, und dieser Code wird es stoppen, wenn Sie es wollen.

var stopVideo = function (element) { 
var iframe = element.querySelector('iframe'); 
var video = element.querySelector('video'); 
if (iframe !== null) { 
    var iframeSrc = iframe.src; 
    iframe.src = iframeSrc; 
} 
if (video !== null) { 
    video.pause(); 
} 
};

Quelle

2017-12-15 20:21:28

Um ein Video zu stoppen, nicht nur pausieren Sie Methoden wie verwenden können:

video.pause() 
video.currentTime = 0

Quelle

2018-03-05 15:12:02

Stoppen Sie das Video von der Wiedergabe

Antwort

Verwandte Themen