當模式關閉時停止播放視頻

我在使用模式打開的HTML中使用視頻標記。目前它仍在播放，如果我退出模式而不暫停視頻。我還沒有JavaScript，因爲我添加的所有內容都不起作用。我也使用bootstrap。這裏是我的HTML：當模式關閉時停止播放視頻

<button type="button" data-toggle="modal" data-target="#myModal"> 
    <h4>SHORT SLEEVED SHIRT<br><br>$20</h4> 
    <img src="images/femaleshortsleeved.jpg"> </button> 
    <!-- Modal --> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <video class="video" width="960px" controls> 
       <source src="images/Short Sleeved Shirt.mp4" type="video/mp4"> 

      </video> 
      <h2>Short Sleeved Shirt<br>$20</h2> 
      <h5>90s lightweight brown patterned shirt.<br>No marked size.<br>Will fit S to M.<br>Length: 62cm<br>Width: 56cm</h5> 
      <button type="button" class="btn btn-primary btn-lg">BUY NOW</button> 
     </div> 
    </div> 
    </div>

來源

2015-11-02 cpalmer

您是否嘗試過使用模式關閉的.pause（）函數？ – Theunis

使用hidden.bs.modal事件。

當模式完成對用戶隱藏（將等待CSS轉換完成）時觸發此事件。

$(function(){ 
    $('#myModal').modal({ 
     show: false 
    }).on('hidden.bs.modal', function(){ 
     $(this).find('video')[0].pause(); 
    }); 
});

來源

2015-11-02 09:51:03

這工作完美，謝謝！ – cpalmer

感謝Pinegrow - 這個工作對我來說：

$('.videoModal').on('hide.bs.modal', function(e) {  
var $if = $(e.delegateTarget).find('iframe'); 
var src = $if.attr("src"); 
$if.attr("src", '/empty.html'); 
$if.attr("src", src); 
});

來源

2016-08-01 00:02:07 Renegade

我希望這Plunker可以幫助你，我用同樣的得到解決。

HTML：自動停止影片在閉模態

<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-06 16:27:39 Bob

你是上帝來的，謝謝你......你救了我......工作 – Abhishek

不需添加任何JS，你可以寫一個簡單的onclick行動，暫停視頻，當用戶關閉模態。

onclick="document.getElementById('demoVideo').pause();"

記得更改'demoVideo'你自己#VideoID。

完整代碼：

<a href="#myVideo"data-toggle="modal" onclick="document.getElementById('demoVideo').play();">--> Watch Video</a> 
    <!-- Modal --> 
<div id="myVideo" class="modal fade" style="display: none;" aria-hidden="true"> 
        <div class="modal-dialog"> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" 
onclick="document.getElementById('demoVideo').pause();">×</button> 
          <h4 class="modal-title">Demo Video</h4> 
         </div> 
         <div class="modal-body"> 
          <video id="demoVideo" width="560" height="315" controls > 
           <source src="images/mydemovideo.mp4" type="video/mp4"> 
          </video> 
         </div> 
        </div> 
       </div> 
      </div>

*記得要改變src您的視頻的。

來源

2017-05-16 06:41:29

當模式關閉時停止播放視頻

回答

相關問題