javascript - AngularJS View 中的 SublimePlayer

Question

我正在尝试在动态加载的 angularjs ui View 中渲染一个 sublime 播放器。我的问题是我加载到 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 */ });

            });
        }
    };
});

注意:自从实现此功能以来，我只能使用一些移动设备来播放此内容。我仍在确定它是否与此实现或我的应用程序中的其他冲突有关。