将Jplayer视频播放与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，当我回到这个话题时 ，我决定尝试其他替代方法，并且发现videoJS开箱即用。

Answer 2

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