项目是一种答题小游戏,题目里面有文字、图片、视频和音频4种格式,我用的angular框架,但是在渲染视频和音频时老是报错,用了$sce还是不能解决,求助大神。
下面是html部分的代码
<div class="other">
<img ng-src="{{store.sub[index].attachment}}" class="image"/>
<video width='100%' height="auto" class="video" controls="controls">
<source ng-src="{{store.sub[index].attachment}}">
</video>
<audio class="audio" controls="controls">
<source ng-src="{{store.sub[index].attachment}}">
</audio>
</div>
js里面
.controller("timer",function($scope,$state,$sce){
var str=$scope.store.sub[index].attachment;
$scope.store.sub[index].attachment=$sce.trustAsResourceUrl(str);
})
参考$sce的使用
.controller("timer",function($scope,$state,$sce){
var str=$scope.store.sub[index].attachment;
// $scope.store.sub[index].attachment已经存在了,所以ng-src已经赋值了,并没有经过$sce的处理,所以会报错。
// 下面的处理没有意义。所以$scope.store.sub[index].attachment的赋值一开始就应该是经过$sce处理后的返回值。
$scope.store.sub[index].attachment=$sce.trustAsResourceUrl(str);
})
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])
<div class="other">
<img ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}" class="image"/>
<video width='100%' height="auto" class="video" controls="controls">
<source ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}">
</video>
<audio class="audio" controls="controls">
<source ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}">
</audio>
</div>