将Jplayer视频播放与Angular.JS集成

时间:2012-12-09 23:00:04

标签: javascript integration angularjs jplayer

我正在使用基于angular.js的框架。我需要根据客户的规格播放视频和iframe。

我正在努力让jPlayer视频播放工作。我已经看到了c0deformer's解决方案,我已将其作为音频播放器集成,但对于我的最新项目,他们肯定需要视频播放。当我启动我的jPlayer实例时,我收到以下错误:

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 

这是jPlayer代码:

(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');
    }
})()

我希望我已经提供了足够的信息!

2 个答案:

答案 0 :(得分:1)

FWIW,当我回到这里时,我决定尝试其他替代品,我发现videoJS完全开箱即用。

答案 1 :(得分:0)

也许你应该在JsFiddle上提供一个简单的例子:http://jsfiddle.net/

如果没有实例,就很难测试代码。

除此之外,我注意到这一行:

name: 'itx-jPlayer-video',

我想这是你的指示?我不确定,但不应该是'itxJPlayerVideo'吗?

  

指令有诸如ngBind之类的骆驼名称。可以通过将驼峰案例名称转换为具有以下特殊字符的蛇案例来调用该指令:, - 或_。

请参阅http://docs.angularjs.org/guide/directive