1

我正在尝试在动态加载的 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>

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模型才能使指令起作用？

4

1 回答 1

0

我能够完成这项工作的唯一方法是在加载 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 */ });

            });
        }
    };
});

注意：自从实现这一点后，我只能让一些移动设备播放它。我仍在确定它是否与此实现或我的应用程序中的其他一些冲突有关。

于 2014-10-22T18:36:17.620 回答