Integrating Jplayer video playback with Angular.JS

Question

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!

Answer 1

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