Question

我的应用程序从REST服务加载多个对象。每个对象都包含一个表示视频文件的Uri的属性。我的应用程序将此作为向用户显示多个视频的源。

因为我需要在用户播放视频（事件）时捕获，我使用Angular指令加载HTML5视频标记：

app.directive("aVideo", function($http){
return {        
    template: '<video class="col-xs-12 col-sm-12 col-md-12" ng-src="[[[creativeViewModel.post.addTrustedUri()]]]" controls preload="metadata"</video>',
    scope:{
        creative: "=",
    },
    link: function(scope, element, attrs) {         
        $(element).find("video").on("play", function () {
            $http.post('/post/' + scope.creative.post.doc_id + '/views?_csrf=' + csrfToken)
            .success(function(data){

            })
            .error(function(error){             

            }); 
        });                     
    },
}

}）;

因此，视频的HTML标记如下：

<div a-video creative="creativeViewModel"></div>

函数 addTrustedUri 是对象本身的一部分，如下所示：

addTrustedUri: function addTrustedUri() {
            return $sce.trustAsResourceUrl(this.post.media);
        },

但是，以下是返回给用户浏览器的代码：

<video class="col-xs-12 col-sm-12 col-md-12" ng-src="" controls="" preload="metadata" <="" video=""></video>

如您所见，ng-src属性显示为空，即使我使用$ sce.trustAsResourceUrl方法启用它。请注意，加载视频文件的域名与应用程序的域名（它是CDN）不同。

有关如何解决此问题的任何想法？

Answer 1

对于那些对此答案感兴趣的人，我找不到适合这个问题的解决方案，但我确实找到了一个可接受的解决方法。这是解决方法：

app.directive("aVideo", function($http, $sce){
    return {
        template: '<a class="video-file"><img class="col-xs-12 col-sm-12 col-md-12 poster-file" ng-src="[[[post.creative.media.poster]]]"></img><span class="play-button-overlay"><img src="/img/video-play-3-256.png" /></span><div class="clearer"></div></a>',       
        scope:{
            post: "=",
        },
        link: function(scope, element, attrs) {
            $(element).find("img").on("click", function () {
                $(element).find('img').remove();
                $(element).append('<video controls width="100%"></video>');
                var video = $(element).find('video');
                video.addClass('col-xs-12');
                video.attr('poster', $sce.trustAsUrl(scope.post.creative.media.poster));
                video.append("<source src='" + $sce.trustAsUrl(scope.post.tempUri) + "' type='" + scope.post.creative.media.contentType + "'></source>");
                video.append("<source src='" + $sce.trustAsUrl(scope.post.creative.media.webm) + "' type='video/webm'></source>");
                video[0].play();
            });
        },
    }
});

基本上它的作用是首先将视频元素显示为图片。当用户点击img元素时，指令元素的link属性启动。在这里，我附加一个视频元素并强制添加mp4和webm格式的源元素，然后通过调用触发视频播放video.play()功能。

Answer 2

您正在模板中动态添加指令（ngSrc）。要使角度识别表达式，您需要transclude: true，如directive下的角度文档中所述。

AngularJS HTML5视频ng-src从指令中清空

2 个答案: