在 Angular JS 中 Bootstrap 模式关闭暂停视频

Question

我正在使用 Angular 和 Twitter Bootstrap 3 并显示多种不同类型的媒体在 ng-repeat 的页面上 - 这些可以是 images 或 videos。用户可以单击任何媒体元素，并使其以 bootstrap 模式弹出以获得更大的视图。

我如何在 Angular 中确保当 Bootstrap 模式关闭时页面中的所有视频都暂停？我目前只有 "X" 关闭元素上的 ng-click（它只会暂停较小的视频缩略图），但我想通过点击页面上的任意位置 来观察模态解雇 并暂停 所有正在播放的视频 。

我的代码如下：

控制器:

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

在此先感谢您的帮助 - 非常感谢！

Answer 1

如果您不对这些模式使用 angular-ui-bootstrap，那么我建议使用自定义指令连接到 modal's events。

此代码未经测试，但希望它能为您提供一个良好的起点。

.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 JS 中 Bootstrap 模式关闭暂停视频

Pause Videos on Bootstrap Modal Close in Angular JS

html5-video

twitter-bootstrap

angularjs

twitter-bootstrap-3