CODEWITHSUNDEEP
javascriptintegrationangularjsjplayer
Nathan C. Tresch
Nathan C. Tresch

Reputation: 948

Integrating Jplayer video playback with Angular.JS

I'm working with a framework based on angular.js. I need to playback video and an iframe is off the menu per my customer's specifications.

I am trying to get jPlayer video playback working. I have seen c0deformer's solution and I have it integrated already as an audio player, but for my newest project they definately need video playback. When I start my jPlayer instance, I get the following error:

pre-call ClosureCompiler.script:1
post-call ClosureCompiler.script:1
TypeError: Cannot read property 'childNodes' of undefined
    at e (http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:38:220)
    at e (http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:38:215)
    at e (http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:38:215)
    at k (http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:42:261)
    at http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:46:471
    at k (http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:42:261)
    at http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:46:458
    at http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:91:245
    at h (http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:75:256)
    at http://arielsmamma/rsrc/3rdparty/angular-1.0.1.min.js:75:489 angular-1.0.1.min.js:60
pre-setmedia-call ClosureCompiler.script:1
post-setmedia-call

Here is the jPlayer code:

(function()
{
    itx.ns( 'ui.video.jPlayerVideo', jPlayerVideo, true );
    itx.extend( jPlayerVideo, itx.Directive,
    {
        restrict: 'E',
        replace: true,
        name: 'itx-jPlayer-video',
        scope: {
            'src': '=',
            'duration': '='
        }
    });


    function jPlayerVideo($scope)
    {
        itx.Directive.apply( this, arguments );
        var self = this;
        console.log('pre-call');
        $("#jp_container_1").jPlayer({
            swfPath: '../rsrc/3rdparty/jplayer/',
            solution: 'flash, html',
            supplied: 'm4v',
            ready: function () {
                console.log('pre-setmedia-call');
                $(this).jPlayer("setMedia", {
                    m4v: $scope.src
                });
                console.log('post-setmedia-call');
            }
        });
        console.log('post-call');
    }
})()

I hope I've given enough information!

Upvotes: 2

Views: 1987

Answers (2)

Nathan C. Tresch
Nathan C. Tresch

Reputation: 948

FWIW, when I got back to this I decided to try other alternatives, and I found that videoJS worked perfectly out of the box.

Upvotes: 1

asgoth
asgoth

Reputation: 35829

Maybe you should provide a simple example on JsFiddle: http://jsfiddle.net/

Without an live example it's hard to test the code.

Aside of that, I've notices the line:

name: 'itx-jPlayer-video',

I suppose this is your directive? I'm not sure, but shouldn't it be 'itxJPlayerVideo'?

Directives have camel cased names such as ngBind. The directive can be invoked by translating the camel case name into snake case with these special characters :, -, or _.

See http://docs.angularjs.org/guide/directive

Upvotes: 0

Related Questions