Question

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

我如何在Angular 中确保当Bootstrap模式关闭时，页面中的所有视频都会暂停？我目前只对“X”关闭元素进行了一次点击（仅暂停了较小的视频节目），但是希望通过页面上的任意位置观看模式解雇并暂停所有视频正在播放。

我的代码如下：

位指示：

// 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模式关闭视频

1 个答案: