Остановить воспроизведение видео

У меня есть два видео на одной странице, и они открываются в iframe. Когда я закрываю всплывающее окно, видео не останавливается. Он продолжает играть. Из-за не зависящих от меня обстоятельств мне приходится работать с видео в рамках iframes.Остановить воспроизведение видео

Может кто-нибудь помочь, ниже код для того же:

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>

источник

2017-01-04 Bob

Возможный дубликат: http://stackoverflow.com/questions/13598423/stop-all-playing-iframe- video-on-click-a-link-javascript –

Если возможно, я также предлагаю вам использовать элементы 'video' вместо того, чтобы напрямую устанавливать' src' 'iframe' в видео, поскольку он дает вам гораздо больше контроля - вы получите метод 'pause()' для одного. –

@RoryMcCrossan вы можете поделиться примером, пожалуйста? это может помочь мне. – Bob

http://plnkr.co/edit/BWPfY8PiYagfb1zIHUEV?p=previ РЭБ

Это plunker помогло мне добиться решения моего вопроса.

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

источник

2017-01-05 15:50:18 Bob

Это будет 'сброс' атрибут src для каждого фрейма, останавливая видео.

jQuery("iframe").each(function() { 
     var url = jQuery(this).attr('src'); 
     jQuery(this).attr('src', url); 
});

Вы также можете запустить следующее, если iframe находится в вашем домене.

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

источник

2017-01-04 16:50:29

Это ничего не делает для я @ Брайант – Bob

Это помогло мне, проверить это! click here to go to the original answer

В принципе, вам нужно использовать iframe или видео для запуска проигрывателя, и этот код остановит его, когда вы этого захотите.

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

источник

2017-12-15 20:21:28

Чтобы остановить видео, а не только паузы вы можете использовать такие методы, как:

video.pause() 
video.currentTime = 0

источник

2018-03-05 15:12:02

Остановить воспроизведение видео

ответ

Смежные вопросы