CODEWITHSUNDEEP
javascriptangularjsvideo.js
user764389
user764389

Reputation: 51

angular single page app, videoJS ready function only fires on page load

Trying to get videoJS to work in an angular directive using ng-view template. Angular routing and template injection is all working fine.

html code:

<div ng-view>
</div>

template code:

<div ng-controller="VideoCntrl">
    <div class="row offset2" >
        <video id='myVideo' videodir controls class="video-js vjs-default-skin" >
            <source src="{{video.videoURL}}"  type="video/mp4" />
        </video>
    </div>
</div>

directive code

    app.directive('videodir',function(){
        var linkFn;

        linkFn = function (scope, element, attrs){
               videojs("myVideo",{"techOrder": ["html5","flash"]},function(){
                    this.src({type: "video/mp4", src: scope.video.videoURL});
                    console.log(scope.video.videoURL);
                });
                console.log('linkfn');
            };

    return {
        restrict: 'A',
        link: linkFn
    }
});

The videojs ready function in the directive videodir ONLY fires the first time the page is hit or if I do a page reload. The first time I hit my page I see in console log the url of my video from scope.video.videoURL and the DOM is using videoJS. If I click on navigation links to load a different template and then come back, videojs ready function doesn't fire (i.e. I don't see my videoURL in the console log and the DOM is not changed by videoJS. I do see 'linkFn' in the console each time the template code is loaded. I assume in the directive where I am doing console.log('linkFn') there is some initialization code I can call on the videojs("myVideo") object so that it manipulates the DOM properly but I can't figure out what that might be.

Any help greatly appreciated.

Upvotes: 1

Views: 4919

Answers (2)

Alex Wolfe
Alex Wolfe

Reputation: 101

When you use videoJs with angular in a single page app, you need to destroy the videojs player manually when your scope is destroyed (when you navigate away from the state the player was created in), and reload it when you create it again.

The ready state doesn't fire again because when you navigate back, the videojs player is technically already created, just your $scope has no way to keep track of it.

Rather than defining the player source in the DOM, create the videojs object dynamically

Useful links

(dynamically create a player)

https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md#alternative-setup-for-dynamically-loaded-html

(Disposing a player in angular directives)

https://github.com/videojs/video.js/issues/808

DOM

<video id='myVideo' videodir controls class="video-js vjs-default-skin" ></video>

Controller

var setupOpt = {
    'controls' : false,
    'autoplay' : false,
    'preload' : 'auto',
    // 'poster' : asset.thumbnail,
    'width' : 'auto',
    'height': 'auto'
};

//inject $sce to use any url, or fetch url from http request
var vidSrc = $sce.trustAsResourceUrl("example.mp4"); 

//create video js player dynamically
videojs( 'myVideo', setupOpt, function(){
   $scope.vid = videojs( 'myVideo' ).src([ {type: "video/mp4", src: vidSrc} ]);
});

//destroy video when $scope is destroyed
$scope.$on( '$destroy', function() {
    console.log( 'destroying video player' );
    $scope.vid.dispose();
});

Upvotes: 8

Andrei Varanovich
Andrei Varanovich

Reputation: 502

Do you see any other errors in console? The issue might be related to the fact, that the player was not properly disposed.

See, for example, these discussions:

I am not an angular expert, but when you go back and forth between views, the player won't be disposed automatically.

Upvotes: 2

Related Questions