SublimePlayer inside AngularJS视图

Question

我试图在一个动态加载的angularjs ui-view中渲染一个出色的播放器。我的问题是，我加载到视图中的HTML内容来自一个ng-model。

例如，我有一个模型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需要使用以下代码进行设置，以呈现播放器：

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模型时运行并呈现sublime播放器的指令？

我必须编译content模型才能使指令工作吗？

Answer 1

我能做到这一点的唯一方法是在加载sublime之前将视频元素动态写入dom。推迟sublime加载的唯一方法是在指令中加载它；这意味着您将在每次加载模板时调用它。

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 */ });

            });
        }
    };
});

备注：由于实现了这一点，我只能让几个移动设备来播放这段视频。我仍然在决定它是否与我的应用程序中的这个实现或其他一些冲突有关。