CODEWITHSUNDEEP
javascriptangularjshtml
jackdaw
jackdaw

Reputation: 2314

angularjs, add loop property to video

Probably missing something simple here but how do I add the 'loop' property to a video in my directive?

I've a variable videoLoop which is two way bound to the directive:

<video class="x-video" ng-src="{{vm.videoSrc}}" autoplay {{vm.videoLoop}}></video>

Where vm.videoLoop is equal to loop. This doesn't interpolate though.

I've also tried:

<video class="x-video" ng-src="{{vm.videoSrc}}" autoplay loop="{{vm.videoLoop}}"></video>

Where vm.videoLoop is equal to false. If I do this the attribute evaluates to true and it continues looping. Any ideas?

Upvotes: 1

Views: 1561

Answers (3)

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

Your vm.videoLoop evaluates to true/false so the result will be:

<video class="x-video" ..... loop="true/false"></video>

The value of the attribute loop doesn't matter, video tag only need loop attribute to be present to activate looping.

For example, all the bellow video tags activate looping:

<video loop> <video loop="true"> <video loop="false">  <video loop="x">

To achieve your goal please try this:

<video class="x-video" ng-src="{{vm.videoSrc}}" autoplay ng-attr-loop="{{vm.videoLoop  || undefined}}"></video>

I hope this will help you.

Upvotes: 3

Roger Garcia
Roger Garcia

Reputation: 357

Using 

<video class="x-video" ng-src="{{vm.videoSrc}}" autoplay {{vm.videoLoop}}></video>

What I would do:

vm.videoloop = "loop" //when I want the video to play continuously
vm.videoloop = "" //when I want the video to play just once

Upvotes: 0

Ravinder Kumar
Ravinder Kumar

Reputation: 752

There is a problem with property binding. Try [loop] = 'vm.videoLoo'

Upvotes: 0

Related Questions