View videos in <video> tag using Angularjs

Asked

Viewed 371 times

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 that function getIdVideo() to return me 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 I’d use the function to return the 4 url’s and then use one ng-repeat to display the 4 different videos, but I couldn’t implement this. How can I solve my problem?

javascript html5 angularjs

1 answer

1

Since it is a fixed amount of videos (and that is not going to change).

You can just 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';

};

  • Using your code I got the videos, but is being shown some 12 videos (repeated 3 by 3) I think because of ng-repeat of the tag div. If I return an array with the 4 url’s instead of just one at a time and then use an ng-repeat in the video tag to scroll through the url’s resolve? I can even implement this in the function, but I don’t know how to do in the view.

  • If you are returning 12 videos in the above code, with an ng-repeat in the <video> tag for 4 urls the same thing will happen. Ta returning 12 videos because there are 3 elements within your "Spells" array. If this is the case, it is correct to return the 12 videos, no? I’m not sure I understand what you intend to do. Post here the content of "content.Spells" and explain in a little more detail what you need.

Browser other questions tagged javascript html5 angularjs

You are not signed in. Login or sign up in order to post.