Display videos in video tag using angularjs

Question

Display videos in video tag using angularjs

Navigation

#1 by (1 votes)

0

View:

<div class="list card" ng-repeat="x in content.spells">
....
    <video width="320" height="240" ng-src="{{(getIdVideo(content.id) | trusted )}}"   controls>
          Seu navegador não suporta o elemento <code>video</code>.
    </video>
....
</div>

Controlller:

  $scope.getIdVideo = function(videoId){
    videoId = videoId.toString();
    for (var i=0; i<=4; i++){
      if (videoId.length != 4){
        //videoId = videoId.push('0');
        videoId = "0"+videoId;
      }

    }

    return 'http://cdn.leagueoflegends.com/champion-abilities/videos/mp4/'+videoId+'_02.mp4';
  };

I call this function getIdVideo() to return a video according to the id passed as argument, the problem is that for each id I need to show 4 videos varying from 2 to 5, the number that comes after the "_" of the url below:

"http: /cdn.leagueoflegends.com/champion-abilities/videos/mp4/ '+ videoId +' _ 02.mp4"

I thought about using make the function return the 4 url's and then use ng-repeat to display the 4 different videos, but I could not implement this. How can I solve my problem?

javascript angularjs html5

asked by anonymous 02.03.2016 / 16:11

1 answer

Store values of a string in a vector Problems with Linq XML using .net namespace

score 1 · Answer 1

Since it is a fixed amount of videos (and this will not change).

You can simply do the following:

<div class="list card" ng-repeat="x in content.spells">
     <video width="320" height="240" ng-src="{{(getIdVideo(content.id, '02') | trusted )}}"   controls>
           Seu navegador não suporta o elemento <code>video</code>.
     </video>

     <video width="320" height="240" ng-src="{{(getIdVideo(content.id, '03') | trusted )}}"   controls>
           Seu navegador não suporta o elemento <code>video</code>.
     </video>

     <video width="320" height="240" ng-src="{{(getIdVideo(content.id, '04') | trusted )}}"   controls>
           Seu navegador não suporta o elemento <code>video</code>.
     </video>

     <video width="320" height="240" ng-src="{{(getIdVideo(content.id, '05') | trusted )}}"   controls>
           Seu navegador não suporta o elemento <code>video</code>.
     </video>
</div>

Controller:

$scope.getIdVideo = function(videoId, seq){
videoId = videoId.toString();
for (var i=0; i<=4; i++){
  if (videoId.length != 4){
    //videoId = videoId.push('0');
    videoId = "0"+videoId;
  }

}

return 'http://cdn.leagueoflegends.com/champion-abilities/videos/mp4/' + videoId + '_' + seq + '.mp4';

};