將Jplayer視頻播放與Angular.JS集成

我正在使用基於angular.js的框架。我需要播放視頻，並且按照我的客戶的規格，菜單中的iframe已關閉。將Jplayer視頻播放與Angular.JS集成

我試圖讓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'); 
    } 
})()

我希望我已經給了足夠的信息！

來源

2012-12-09 Nathan C. Tresch

這將是很難調試沒有小提琴或什麼的。你有沒有嘗試設置一個斷點並逐步完成代碼？ –

@blesh我對JS工具還是比較新的，我會研究如何做到這一點，並看看。不過，我不確定我在找什麼。 –

如果任何人都可以提供幫助，我可以通過聊天或電子郵件或其他方式提供實際網站的鏈接？我真的不知道如何通過Angular的縮小代碼。 –

FWIW，當我回到這個我決定嘗試其他選擇，我發現videoJS工作完全開箱。

來源

2013-01-09 04:45:43

也許你應該提供的jsfiddle一個簡單的例子：http://jsfiddle.net/

沒有一個活生生的例子，很難對代碼進行測試。

除了這一點，我已經注意到了行：

name: 'itx-jPlayer-video',

我想這是你的指令？我不確定，但不應該是'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 _.

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

來源

2012-12-20 11:52:11 asgoth

當我回到這個任務時，我會嘗試設置一個repro。我甚至沒有時間去換掉javascript的非縮小版本，看看我是否可以逐步瞭解並瞭解這裏發生的事情。我的團隊中的其他人可能最終也會這樣做，如果是的話，我會在這裏粘貼答案。 –

將Jplayer視頻播放與Angular.JS集成

回答

相關問題