如何在打开时在 Angular-Bootstrap 模态中播放视频？答案

【问题标题】：How to play video inside Angular-Bootstrap modal on open?如何在打开时在 Angular-Bootstrap 模态中播放视频？
【发布时间】：2016-01-12 16:06:00
【问题描述】：

我正在根据资源范围数组动态加载视频：

this.open = function (size, resource) {
    var modalInstance = $uibModal.open({
        templateUrl: 'playModal.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
            resource: function () {
                return resource;
            }
        }
    });

    modalInstance.rendered.then(function () {
        $('#resource-video')[0].play();
    });
};

如您所见，我使用 jQuery 选择器来查找 HTML5 视频标签，并在模态的 rendered 事件的回调中播放它。执行此操作并维护 MVC 纪律的“Angular 方式”是什么？

【问题讨论】：

标签： angularjs model-view-controller html5-video

【解决方案1】：

您可以创建一个原始的 JavaScript“类”来处理给定原始 dom 元素的视频。例如

function VideoControl(videoElement) {
  this.videoElement = videoElement;
}

VideoControl.prototype.play = function() {
  this.videoElement.play();
}

VideoControl.prototype.pause = function() {
  this.videoElement.pause();
}

为了实例化它并实际将 dom 元素传递给它，您可以将它包装在指令中。例如

app.directive('videoControl', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var videoControlModel = $parse(attrs.videoControl);
      videoControlModel.assign(scope, new VideoControl(element[0]));
    }
  };
})

然后你可以像这样使用这个视频控制指令：

<button ng-click="videoControl.play()">Play</button>

<video  class="video" controls video-control="videoControl">
    ...
</video>

这是一个正常工作的插件：https://plnkr.co/edit/2epHSCo6wwyCplNhOBSe?p=preview

【讨论】：

我不确定我是否理解如何将其应用于模态回调场景。
您可以用$scope.videoControl.play() 替换您的$('#resource-video')[0].play(); 代码行。或者，如果您将控制器用作语法 this.videoControl.play()。 video-control 指令将 VideoControl 类的实例分配给您传递给它的任何变量名称
谢谢。我现在跟着。然而，仅仅为了保持关注点分离，三个函数加上一个指令是难以下咽的。我想看看还有什么其他想法。