Angularjs 在引导模式关闭时暂停视频

我将Angular与Twitter Bootstrap 3一起使用，并在一个页面上以ng repeat的形式显示多种不同类型的媒体-这些媒体可以是图像或视频。用户可以单击任何媒体元素，并使其在引导模式中弹出，以获得更大的视图

如何确保当引导模式关闭时，页面中的所有视频都暂停？我目前只在“X”关闭元素上点击了ng键（这只会暂停较小的视频thumnail），但我想通过点击页面上的任何位置来观看，并暂停当前播放的所有视频

我的代码如下：

控制器：

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

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

查看：

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

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

&时代；接近
媒体
您的浏览器不支持视频标记。

---

提前感谢您的帮助-非常感谢

如果您没有为这些模态使用angular ui引导，那么我建议使用自定义指令连接到

这段代码没有经过测试，但希望它能为您提供一个良好的起点

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

在HTML中，使用模态的开始标记上的指令

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

您正在使用angular ui的引导模块吗？我是。。我把它作为一个注入依赖项，但并没有专门用于这些模态。。