视频中的onclick应打开window.In弹出的窗口中视频应该打，应该有用于关闭弹出窗口，如果没有必要的选项弹出。

任何人都可以请帮我对此...

我的HTML：

 ＆LT; D​​IV CLASS =集装箱液NG控制器=视频控制器＆GT;    ＆LT; D​​IV CLASS =面板面板默认＆GT;        ＆LT; D​​IV CLASS =面板标题＆GT;            ＆LT; H3＆GT;                ＆LT; B＆GT;视频段＆LT; / B＆GT;            ＆LT; / H3 GT＆;        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =面板体＆GT;            ＆LT; D​​IV NG秀=videoSources.length＆GT;                ＆lt;视频宽度= 176高度= 99                    风格=保证金左：70像素;保证金右：10px的;                    NG-重复=videoSource在videoSources | PAGINATE：页次：由$指数pageSize的曲目                    控制NG-SRC ={{videoSource | trustUrl}}＆GT;                ＆LT; /视频＆GT;                ＆LT; D​​IV的风格=保证金左：46px;＆GT;                    ＆LT;按钮样式=保证金左：750pxNG残疾=isFirstPage（）                        NG-点击=prevPage（）＆GT; previous＆LT; /按钮＆GT;                    ＆LT;按钮样式=保证金左：汽车; NG-禁用=isLastPage（）                        NG-点击=下一页（）＆gt;接下来＆LT; /按钮＆GT;                ＆LT; / DIV＆GT;            ＆LT; / DIV＆GT;            ＆LT; D​​IV NG隐藏=videoSources.length＆GT;                ＆LT; A HREF =＃NG点击='loadVideos（）'＆GT;加载视频＆LT; / A＆GT;            ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;＆LT; / DIV＆GT; 

我的JS：

  app.controller（        视频控制器，        功能（$范围）{            $ scope.pageNum = 0;            $ scope.pageSize = 3;            $ scope.isFirstPage =功能（）{                返回$ scope.pageNum === 0;            };            $ scope.isLastPage =功能（）{                返回$ scope.pageNum＆GT; = Math.floor（$ scope.videoSources.length                        / $ scope.pageSize）;            };            $范围。prevPage =功能（）{                $ scope.pageNum--​​;            };            $ scope.nextPage =功能（）{                $ 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'];        }）。过滤器（trustUrl，['$ SCE'，函数（$ SCE）{    复位功能（recordingUrl）{        返回$ sce.trustAsResourceUrl（recordingUrl）;    };}]）。过滤（        分页，        功能（）{            的console.log（'创建PAGINATE功能，参数）;            返回功能（inputArray，PAGENUMBER，pageSize的）{                的console.log（'分页'，参数）;                PAGENUMBER = PAGENUMBER || 0;                的pageSize = ||的pageSize 4;                如果（！Array.isArray（inputArray））                    返回inputArray;                返回inputArray.slice（PAGENUMBER * pageSize的，（PAGENUMBER + 1）                        * pageSize的）;            };        }）; 

解决方案

下面是一个基于一个可能的解决方案角UI的引导模式：

\r\r

\r

\r\r\r

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);
            };
        });

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>