CODEWITHSUNDEEP
angularjs
dev333
dev333

Reputation: 799

How to display multiple videos in a div using angular.js

I want to display multiple videos horizontally in a single div using angular.js.

I have kept all the videos in an array and trying to pull them out in a div in a horizontal manner.But out of three,I'm getting only one video in the entire div.

Remaining two videos are getting overrided.Can I use ng-repeat over here? Can anyone please help me out regarding this issue...

My html code :

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

My js code:

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

Upvotes: 0

Views: 2242

Answers (2)

Ionut Costica
Ionut Costica

Reputation: 1392

You can just add an ng-repeat directive to the <video> element like so:

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

The track by $index syntax is necessary in case there are two video source strings which have equal values (like in your question example code). It's also in my opinion better than wrapping the video in an additional <div>.

Here's a working example (removed the module dependency and added ng-app and ng-controller to the root 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>

Edit: to get the videos to work, use ng-src and add the .filter() from the example (to trust the string we pass it as an url)

Upvotes: 1

Leon
Leon

Reputation: 1881

You need to use ng-repeat to repeat the video element for each video in the array. 

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

The div will now repeat for each video. Within that div, each of the "videosources" is referred to as "video". Angular will handle the rest.

The reason you were only seeing one is because you were referring to the whole array as a single item. It was probably displaying the first one.

Upvotes: 0

Related Questions