userqwert userqwert - 4 months ago 20
AngularJS Question

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?

Answer

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

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

Comments