用angular 和ui.bootstrap的弹窗做视频播放,关闭弹窗后,视频仍在后台下载。
用angular 和ui.bootstrap的弹窗做视频播放,关闭弹窗后,视频仍在后台下载。
<script type="text/ng-template" id="ModalClaimCtrl.html">
<div class="modal-header">
<h4 class="modal-title" ng-bind="_video.title"></h4>
</div>
<div class="modal-body">
<video ng-src="{{trustSrc(_video.video720Url)}}" style="width: 100%;height: auto;" controls>
</video>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="close()">关闭</button>
</div>
</script>
//js代码
angular.module('courseWorkManage').controller('CourseController',function (courseService,$scope, $uibModal) {
$scope.getCourseList = function (url,params) {
courseService.getCourseList(url,params).then(function (data) {
$scope.courseList = data.courseList;
});
}
$scope.getCourseList('testGetCourseList.do','currentPage=1')
$scope.open = function(size,video) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'ModalClaimCtrl.html',
controller: 'ModalClaimInstanceCtrl',
size: size,
resolve: {
video: function () {
return video;
}
}
});
};
});
angular.module('courseWorkManage').controller('ModalClaimInstanceCtrl',function($scope,$http, $uibModalInstance,$sce, video) {
$scope._video = angular.copy(video);
$scope.trustSrc = function (url) {
return $sce.trustAsResourceUrl(url);
}
$scope.close = function() {
$scope._video = null;
$uibModalInstance.close('close');
};
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论