AngularJS視圖中的SublimePlayer

我想在一個動態加載的angularjs ui視圖中呈現一個崇高的播放器。我的問題是我加載到視圖中的HTML內容來自ng模型。AngularJS視圖中的SublimePlayer

例如，我有模型content，存儲下面的代碼：

<video sublime-player id="sublime_player" poster="" width="980" height="551" data-name="test" data-uid="test-uid" preload="none"> 
    <source src="http://cdn.mydomain.com/myvideo.mp4" data-quality="hd" /> 
</video>

在視頻標籤的sublime-player屬性應指向一個指令，使玩家。

崇高需要設置用下面的代碼，以使播放器：

sublime.ready(function(){ 
    sublime.prepare(attr.id, function(player) { 
     // player is now ready. 
     // 'sublime_player' is the video element's id 
     var player = sublime('sublime_player'); 
    }); 
})

如何運行，將運行並呈現在content模型加載崇高玩家指令？

我是否必須編譯content模型才能使指令工作？

來源

2013-08-06 Sneaksta

我能夠完成這項工作的唯一方法是動態地將視頻元素寫入dom加載崇高。阻止崇高加載的唯一方法是將其加載到指令中;這意味着每次加載模板時都會調用它。

app.directive("sublime", function() { 
    return { 
     restrict: 'E', // Create <sublime></sublime> to use in template 
     link: function($scope, element, attrs) { 

      // Programmatically add sources or other attrs to <video> from your ngModel 
      element.html('<video><source src="movie.ogg"></video>'); 

      // Capture new <video> in var 
      var myVideoPlayer = element[0].children[0]; 

      sublime.load(); // Load Sublime 
      sublime.ready(function(){ // Wait for init 
       sublime.prepare(myVideoPlayer, function(player){ // Queue up player 
        console.log('Sublime Player Ready'); 
       }); 

       // Event Listeners & Analytics Here: 
       sublime.player(myVideoPlayer).on("start", function(){ /* Do Something */ }); 

      }); 
     } 
    }; 
});

注：自從實施了這一點，我只能得到一些移動設備上玩這個了。我仍然在確定它是否與我的應用中的這個實現或其他衝突有關。

來源

2014-10-22 18:36:17

AngularJS視圖中的SublimePlayer

回答

相關問題