如何使用angular.js在div中显示多个视频

Question

我希望使用angular.js在单个div中水平显示多个视频。

我把所有的视频都保存在一个数组中，并试图在一个水平的manner.But中的一个div中把它们拉出来，在整个div中我只得到一个视频。

剩下的两个视频正在得到overrided.Can我用ng-重复这里？有人能帮我解决这个问题吗..。

我的html代码：

<div class="panel-body">

                <video width=176 height=99 html5-video='{{ videoSources }}' autoplay='true'
                    controls='true'>
                </video>
                <br> <a href="#" ng-click='loadVideos()'>Load videos</a>

            </div>

我的js密码：

angular.module('Admin', ['media'])
.controller('Home', function($scope) {

    $scope.videoSources = [];

    $scope.loadVideos = function() {
        $scope.videoSources.push('http://localhost/Video/Digital_Hiring.mp4');
        $scope.videoSources.push('http://localhost/Video/Customer_Service.mp4');
        $scope.videoSources.push('http://localhost/Video/Digital_Hiring.mp4');
    };
});

Answer 1

您只需将ng-repeat指令添加到<video>元素，如下所示：

<video ... html5-video="{{videoSource}}" ng-repeat="videoSource in videoSources track by $index">

如果有两个具有相同值的视频源字符串(如您的问题示例代码)，则必须使用track by $index语法。在我看来，这也比在附加的<div>中包装视频更好。

下面是一个工作示例(删除了模块依赖项，并将ng-app和ng-controller添加到根div中)：

​

angular.module('Admin', [])
  .controller('Home', function($scope) {

    $scope.videoSources = [];

    $scope.loadVideos = function() {
      $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/boat_149.webm');
      $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/horse_riding_205.webm');
      $scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/flower_124.webm');
    };
  })
  .filter("trustUrl", ['$sce',
    function($sce) {
      return function(recordingUrl) {
        return $sce.trustAsResourceUrl(recordingUrl);
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div class="panel-body" ng-app="Admin" ng-controller="Home">

  <video width=176 height=99 ng-repeat="videoSource in videoSources track by $index" autoplay controls ng-src="{{videoSource | trustUrl}}">
  </video>
  <br> <a href="#" ng-click='loadVideos()'>Load videos</a>

</div>

​

编辑：使视频正常工作，使用ng-src并添加示例中的.filter() (为了信任字符串，我们将其作为url传递)

Answer 2

您需要使用ng-重复来重复数组中每个视频的视频元素。

<div class="panel-body">
    <div ng-repeat="video in videosources">
        <video width=176 height=99 html5-video='{{ video }}' autoplay='true'
                controls='true'>
        </video>
    </div> 
</div>

div现在将对每个视频重复。在该div中，每个“视频资源”都被称为“视频”。角钢会处理剩下的。

您只看到一个的原因是因为您将整个数组作为单个项引用。很可能是在展示第一个。