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)。
有关如何解决此问题的任何想法?
您在模板中动态添加指令(ngSrc)。为了有角度地识别表达式,您需要transclude: true
,如directive下的角度文档中所述。
感谢您的回复。按照建议添加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()
函数触发视频播放。
我知道这篇文章已经很长时间了,但是您找到了解决方案吗? – Bonswouar 2016-04-21 15:16:04
@Bonswouar在下面看到自己的答案。 – 2016-04-23 09:13:14