Video.js: VideoJS with AngularJS

[terrykfwong]

First of all, thank you for this awesome plugin :)

I am working with AngularJS with VideoJS, I have created a directive

.directive('videojs', function () {
    var linker = function (scope, element, attrs){
            attrs.type = attrs.type || "video/mp4";

            var setup = {
                'techOrder' : ['html5', 'flash'],
                'controls' : true,
                'preload' : 'auto',
                'autoplay' : false,
                'height' : 480,
                'width' : 854
            };

            var videoid = 107;
            attrs.id = "videojs" + videoid;
            element.attr('id', attrs.id);
            element.attr('poster', "http://10.1.21.36:8080/Testube/media/" + videoid + ".jpg");
            var player = _V_(attrs.id, setup, function(){
                var source =([
                    {type:"video/mp4", src:"http://testube:8080/Testube/media/" + videoid + ".mp4"}
                ]);
                this.src({type : attrs.type, src: source });
            });
        }
    return {
        restrict : 'A',
        link : linker
    };
});

And in the partial HTML I have

    <video videojs class="video-js vjs-default-skin vjs-controls-enabled vjs-has-started vjs-paused vjs-user-inactive" ng-model="video">
    </video>

The first time I visit the page, videoJS render the control successfully, however, the second time I visit the same page, it doesn't render it at all unless I do a full page reload. For example, if I visit video 107, and visit video 108, they both render successfully, but if I go back to video 107, it would not render. The _V_ method is called, but it's not changing the DOM.

I couldn't create a demo on jsbin because it involves more than one page. This is the first time I am filing a issue report on github, please let me know if I have done anything wrong, thank you very much.

[mmcc]

Glad we could be your first GitHub issue :)

So I realize that a JSBin might be difficult, but is there any chance you could show a live example? It's a little hard to debug something like this without actually seeing it in action.

[terrykfwong]

Hello Matthew,

Thank you so much :)

I am not sure if it helps at all, I have attached 3 screenshots, first one is clicking into a video page with videojs directive which control render successfully

, second one is clicking back into the video list

, third one is clicking back into the same video page with videojs and the control does not render

. I think the video JS does not render the control because the same id of video element was rendered once at the first click.

May I ask if this has provided enough detail? I am unable to upload any video demonstration here, maybe I can email them to you if it helps. Thank you so much for your help and your awesome library!! :)

Terry

[mmcc]

This is helpful! Best case scenario is actually being able to use it, but I understand not wanting to put something up before it's ready.

I'm only vaguely familiar with Angular / Directives, so please take this with a few hundred grains of salt. Normally when dynamically creating video elements like this, I append a new <video> element to the DOM dynamically (blank with just classes, etc), then use Video.js to do the actual setup. When I'm done with the video, I call dispose() to clean everything up, especially if I'm going to dynamically create a new video element.

So, all of that being said, I think what I'm suggesting for your kind of use is to create a directive that dynamically creates a unique video element for each video. Make sense?

[mmcc]

Hi @terrykfwong, just a bump to see if you had any updates on progress for this one.

[denisvlr]

I ran into the same issue, as @mmcc mentioned you need to call the dispose function when the directive is destroyed. You can do it by adding in the link function:

scope.$on('$destroy', function () {
    player.dispose();
});

[mmcc]

Thanks @denisvlr! I think with that we can go ahead and close this one, but this is a good reference issue for other folks in the same boat.

[schema0708]

Hi,

I'm having a similar problem with video-js, but theres nothing dynamic about it like the above its basically a partial that has about 7 videos in it. I've renamed all of my ids accordingly but no luck?. It's still not showing my controls correctly when I refresh my page?. I've attached a image with my html code for reference, please help me I've been trying to figure this out for awhile now and no luck?.

Thanks,

• Abel

[ghost]

I know this is a pretty stale issue, but if anyone is interested I created an angular directive called vjs-video that addresses the several "gotchas" that could occur when using video.js with angular.

It properly disposes of the player when the directive is destroy (as @mmcc pointed out should happen) and adds angular functionality such as bindable media sources.

[mmcc]

@LonnyGomes Sweet! Any chance you're going to update this for 5.0?

[ghost]

@mmcc yup, it isn't using browserfy or anything but it does support 5.x as well as 4.x. I should probably make that more clear in the documentation!