Question

我想使用angular.js在一个div中水平显示多个视频。

我已将所有视频保存在一个阵列中，并尝试以横向方式将它们拉出div。但在三个中，我只在整个div中获得一个视频。

剩下的两个视频正在被覆盖。我可以在这里使用ng-repeat吗？任何人都可以帮我解决这个问题...

我的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()（以信任我们将其作为网址传递的字符串）

Answer 2

您需要使用ng-repeat重复阵列中每个视频的视频元素。

<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中，每个“视频源”被称为“视频”。 Angular会处理剩下的事情。

您只看到一个原因是因为您将整个数组称为单个项目。它可能显示了第一个。

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

2 个答案: