Onclick of a video should open the popup box using angularjs - angularjs

Question

Onclick of a video should open the popup window.In the popup window the video should be playing and should have an option for closing the popup window,if not needed.
Can anyone please help me out regarding this ...
My html :
<div class="container-fluid" ng-controller="videocontroller">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
<b>Video Segment</b>
</h3>
</div>
<div class="panel-body">
<div ng-show="videoSources.length">
<video width=176 height=99
style="margin-left: 70px; margin-right: 10px;"
ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index"
controls ng-src="{{videoSource | trustUrl}}">
</video>
<div style="margin-left: 46px;">
<button style="margin-left: 750px" ng-disabled="isFirstPage()"
ng-click="prevPage()">Previous</button>
<button style="margin-left: auto;" ng-disabled="isLastPage()"
ng-click="nextPage()">Next</button>
</div>
</div>
<div ng-hide="videoSources.length">
<a href="#" ng-click='loadVideos()'>Load videos</a>
</div>
</div>
</div>
</div>
My js:
app.controller(
'videocontroller',
function($scope) {
$scope.pageNum = 0;
$scope.pageSize = 3;
$scope.isFirstPage = function() {
return $scope.pageNum === 0;
};
$scope.isLastPage = function() {
return $scope.pageNum >= Math.floor($scope.videoSources.length
/ $scope.pageSize);
};
$scope.prevPage = function() {
$scope.pageNum--;
};
$scope.nextPage = function() {
$scope.pageNum++;
};
$scope.videoSources = [
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4',
'http://Video/Digital_Hiring.mp4' ];
}).filter("trustUrl", [ '$sce', function($sce) {
return function(recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
} ]).filter(
'paginate',
function() {
console.log('creating paginate function', arguments);
return function(inputArray, pageNumber, pageSize) {
console.log('paginating', arguments);
pageNumber = pageNumber || 0;
pageSize = pageSize || 4;
if (!Array.isArray(inputArray))
return inputArray;
return inputArray.slice(pageNumber * pageSize, (pageNumber + 1)
* pageSize);
};
});

Answer 1

Here is a possible solution based on Angular ui-bootstrap modal:
var app = angular.module('app', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, $log, $uibModal) {
$scope.open = function(size, videoSource) {
$log.info("open", videoSource);
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModal.html',
controller: 'ModalInstanceCtrl',
backdrop: true,
size: size,
resolve: {
videoSource: function() {
return videoSource;
}
}
});
modalInstance.result.then(function(result) {
//
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.videoClick = function($event, videoSource) {
$log.info("videoClick", videoSource)
$scope.open('lg', videoSource);
};
});
app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance, videoSource, $log) {
$log.info("ModalInstanceCtrl", videoSource);
$scope.id = Math.floor((Math.random() * 100) + 1);
$scope.videoSource = videoSource;
$scope.ok = function() {
$uibModalInstance.close('ok');
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
app.controller(
'videocontroller',
function($scope) {
$scope.pageNum = 0;
$scope.pageSize = 3;
$scope.isFirstPage = function() {
return $scope.pageNum === 0;
};
$scope.isLastPage = function() {
return $scope.pageNum >= Math.floor($scope.videoSources.length / $scope.pageSize);
};
$scope.prevPage = function() {
$scope.pageNum--;
};
$scope.nextPage = function() {
$scope.pageNum++;
};
$scope.videoSources = [
'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4',
'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4',
'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4',
'http://Video/Digital_Hiring.mp4',
'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'
];
});
app.filter("trustUrl", ['$sce', function($sce) {
return function(recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}]);
app.filter(
'paginate',
function() {
console.log('creating paginate function', arguments);
return function(inputArray, pageNumber, pageSize) {
console.log('paginating', arguments);
pageNumber = pageNumber || 0;
pageSize = pageSize || 4;
if (!Array.isArray(inputArray))
return inputArray;
return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container-fluid" ng-controller="videocontroller">
<div class="panel panel-default">
<div class="panel-heading">
<h3><b>Video Segment</b></h3>
</div>
<div class="panel-body">
<div ng-show="videoSources.length">
<video width=176 height=99 style="margin-left: 70px; margin-right: 10px;"
ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index" ng-src="{{videoSource | trustUrl}}"
ng-click="videoClick($event, videoSource)">
</video>
<div style="margin-left: 46px;">
<button style="margin-left: 750px" ng-disabled="isFirstPage()" ng-click="prevPage()">Previous</button>
<button style="margin-left: auto;" ng-disabled="isLastPage()" ng-click="nextPage()">Next</button>
</div>
</div>
<div ng-hide="videoSources.length">
<a href="#" ng-click='loadVideos()'>Load videos</a>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="myModal.html">
<div id="my-modal-{{id}}" click-outside="cancel()">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<div class="media">
<video style="width:100%;height:100%;" controls autoplay ng-src="{{videoSource | trustUrl}}"></video>
</div>
<pre>src = {{videoSource | trustUrl}}</pre>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
</body>
</html>

Answer 2

When you press at the image the youtube video will popup in a nice way
<a data-video="https://www.youtube.com/embed/GdC7jOuk4g8?autoplay=1" class="video" data-toggle="modal" data-target="#videoModal" ><%= image_tag "WatchNow.jpg",width:"250" %></a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe width="500" height="445" src="https://www.youtube.com/embed/GdC7jOuk4g8?autoplay=1&mute=1&enablejsapi=1" allow="autoplay">
</iframe>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "";
$(theModal + ' source').attr('src', videoSRCauto);
$(theModal + ' video').load();
$(theModal + ' button.close').click(function () {
$(theModal + ' source').attr('src', videoSRC);
});
});
});</script>