CODEWITHSUNDEEP
angularjstwitter-bootstraptwitter-bootstrap-3html5-video
James
James

Reputation: 81

Pause Videos on Bootstrap Modal Close in Angular JS

I'm using Angular with Twitter Bootstrap 3 and have multiple different types of media displayed on a page in an ng-repeat - these can be either images or videos. A user can click on any media element and have it pop up in a bootstrap modal for a larger view.

How can I In Angular make sure that when the Bootstrap modal is closed all videos in the page are paused? I currently have an ng-click on the "X" close element only (which only pauses the smaller video thumnail) but would like to watch for modal dismissal from a click anywhere on the page and pause all videos currently playing.

My code is below:

Contoller:

// We need to pause all videos playing when modal closed
$scope.pauseVideo = function() {
  // Find elements by video tag
  var video = angular.element(document.querySelector('video'));
  // Loop through each video element 
  angular.forEach(video, function(obj) {
    // Apply pause to the object
    obj.pause();
  });
};

View:

<div class="modal bs-modal-lg" id="mediaModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" data-ng-click="pauseVideo()">
        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 align="center" class="modal-title">Media</h4>
      </div>
      <div class="modal-body">
        <div class="row-fluid">
          <div data-ng-switch on="mimeType">
            <img class="img-responsive" data-ng-src="{{ mediaURL }}" data-ng-switch-when="image">
            <video class="img-responsive" width="360" height="200" controls data-ng-switch-when="video">
              <source type='video/mp4' ng-src="{{ mediaURL }}" />
              <source type='video/ogg' ng-src="{{ mediaURL }}" /> Your browser does not support the video tag.
            </video>
        </div>
      </div>
    </div>
  </div>
</div>

Thanks in advance for any help - much appreciated!

Upvotes: 1

Views: 1593

Answers (1)

Anid Monsur
Anid Monsur

Reputation: 4538

If you're not using angular-ui-bootstrap for these modals, then I'd suggest hooking into the modal's events with a custom directive.

This code isn't tested, but hopefully it gives you a good starting point.

.directive('pauseOnClose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.on('hidden.bs.modal', function (e) {
                // Find elements by video tag
                var nodesArray = [].slice.call(document.querySelectorAll("video"));
                // Loop through each video element 
                angular.forEach(nodesArray, function(obj) {
                    // Apply pause to the object
                    obj.pause();
                });
            });
        }
    }
});

In your HTML, use the directive on the modal's opening tag.

<div pause-on-close class="modal bs-modal-lg" id="mediaModal" tabindex="-1" role="dialog" aria-hidden="true">

Upvotes: 1

Related Questions