Using video.js in angular.js directive

Question

This directive is supposed to watch for changes in the scope.tutorialNumber variable (which increases as the user progresses through tutorials) and then load the new video by using tutorialNumber as an index on the array videoURLs, which then replace the first one which is hardcoded into the html. However the $watch doesn't seem to get triggered at all when tutorialNumber is updated. Why?

<video data-setup="{'techOrder': ['html5', 'flash']}"  class="video-js vjs-default-skin" id="myvideo" video-loader="tutorialNumber" id="video" controls>
    <source type="video/mp4" src="file:///C:/Users/Dell/Desktop/grammar%20game/ㅗㅏregular.mp4"></source> 
    Your browser does not support the video tag.
</video>

.directive('videoLoader', function(){
    return function (scope, element, attrs){
            scope.$watch(scope.tutorialNumber, function(){          
                //element.load();           
                scope.video.src(scope.videoURLs[scope.tutorialNumber]);
                scope.video.ready(function(){
                scope.video.play();
                $(scope.video).bind('ended', function(){
                    $(scope.video).unbind('ended');
                    if (!scope.video.ended) {
                        return;
                    }
                    scope.tutorialNumber++;
                    scope.$apply();
                    scope.loadFromMenu();
                });
            });
        });
    }
});

Your video tag has two IDs, just a note.

Brant
– Brant

2013-04-14 14:10:22 +00:00
Commented Apr 14, 2013 at 14:10 — Brant
– Brant, Commented Apr 14, 2013 at 14:10

Stewie · Accepted Answer · 2013-03-01 15:14:00Z

1

You should write your $watch expression as:

scope.$watch('tutorialNumber', function(){ ...

or

scope.$watch(function(){return scope.tutorialNumber;}, function(){ ...

answered Mar 1, 2013 at 15:14

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tules Over a year ago

tried that and the video doesn't even load the first time, let alone on change

Tules Over a year ago

plnkr.co/edit/fDOrF3UHj5ulubSanxfu?p=preview although this one is completely broken...

Stewie Over a year ago

Your Plunker froze when I tried searching for 'tutorialNumber'. Would be great if you could reduce it to the bare minimum that still reproduces the problem in question.

Tules Over a year ago

I can really take anything out, it's all dependent on everything working, and what I put into Plunker works in my browser but not in Plunker. TBH I'm thinking video.js was just a failed experiment. This works for me though plnkr.co/edit/fDOrF3UHj5ulubSanxfu?p=preview

Paul Kane · Accepted Answer · 2014-07-11 19:08:05Z

0

Am I reading this wrong, or are your scope references written wrong?

You have scope listed in most cases, but the common Angular reference is $scope.

Also, there is such a thing as $rootScope. You can utilize $rootScope to return values to the parent of the application (model) and then utilize $scope inside directives or modules to compartmentalize the data.

answered Jul 11, 2014 at 19:08

Paul Kane

1111 silver badge2 bronze badges

Collectives™ on Stack Overflow

Using video.js in angular.js directive

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related