点击视频应该使用angularjs打开弹出框

时间：2016-01-22 05:40:55

标签： angularjs video popup

点击视频应打开弹出窗口。在弹出窗口中，视频应该正在播放，如果不需要，应该有关闭弹出窗口的选项。

任何人都可以帮我解决这个问题......

我的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>

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

2 个答案:

答案 0 :(得分：1)

以下是基于Angular ui-bootstrap模式的可能解决方案：

＆＃13;
＆＃13; 
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);
    };
  });
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

当您按图片时，YouTube视频会以一种不错的方式弹出

<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">&times;</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>
相关问题
最新问题