AngularJS HTML5视频ng-src为空指令

我的应用程序从REST服务中加载多个对象。每个对象都包含一个代表视频文件的Uri的属性。我的应用程序以此为源向用户显示多个视频。AngularJS HTML5视频ng-src为空指令

因为我需要当用户播放视频（事件），我加载使用角指令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>

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

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

来源

2014-10-18 Luis Delgado

我知道这篇文章已经很长时间了，但是您找到了解决方案吗？ – Bonswouar 2016-04-21 15:16:04

@Bonswouar在下面看到自己的答案。 – 2016-04-23 09:13:14

-1

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

来源

2014-10-18 23:35:26

感谢您的回复。按照建议添加transclude参数不会改变行为。它看起来好像角度拒绝读取URL。 – 2014-10-19 08:57:38

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

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()函数触发视频播放。

来源

2016-04-23 09:12:49

AngularJS HTML5视频ng-src为空指令

回答

相关问题