javascript - Stop Video From Playing When Modal Closes - Stack Overflow

admin管理员组

文章数量:1196348

I'm using the video tag in HTML that opens in a modal. Currently it is still playing if I exit the modal without pausing the video. I have no javascript yet, as everything I add doesn't work. I'm using bootstrap also. Here is my 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>

I'm using the video tag in HTML that opens in a modal. Currently it is still playing if I exit the modal without pausing the video. I have no javascript yet, as everything I add doesn't work. I'm using bootstrap also. Here is my 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>

• javascript
• jquery
• html
• twitter-bootstrap
• modal-dialog

Share Improve this question Follow asked Nov 2, 2015 at 9:40 randomuser12345randomuser12345 6111 gold badge11 silver badge77 bronze badges 1

• Have you tried the .pause() function on modal dismiss? – Theunis Commented Nov 2, 2015 at 9:53

Add a comment  | 

7 Answers 7

Sorted by: Reset to default 8

Use the hidden.bs.modal event.

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

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

Without adding any JS, you can just write a simple onclick action to pause your video when the user close the modal.

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

remember to change 'demoVideo' to your own #VideoID.

---

Complete code :

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

*remember to change the src to your video's.

I hope this Plunker might help you, I used the same to get the solution.

HTML: Autostop Videos in Closed Modal

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

If you have unlimited modals loaded dynamically, then use this:

(function ($) {
  $(document).on('hidden.bs.modal', function (e) {
    var video = document.getElementById('player-' + e.target.id);
    video.pause();
    video.currentTime = 0;
  });
})(jQuery);

Thanks Pinegrow - this worked for me:

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

First add a id to your video player like

<video width="700" height="400" controls="controls" preload="auto" autoplay="true" id="myPlayer" name="myPlayer">
//codes..
</video>

Then add following code to close event of modal

document.getElementById("myPlayer").pause();
        document.getElementById("myPlayer").currentTime = 0;

How we Pause/stop YouTube iframe video in modalpopup

$('#close_one').click(function (e) {
                             
   let link = document.querySelector('.divclass');// get iframe class 
   let link = document.querySelector('#divid');// get iframe id
   let video_src = link.getAttribute('src');
        
   $('.youtube-video').children('iframe').attr('src', ''); // set iframe parent div value null 
   $('.youtube-video').children('iframe').attr('src', video_src);// set iframe src again it works perfect
        
});

本文标签： javascriptStop Video From Playing When Modal ClosesStack Overflow