AngularJs中<vedio>标签使用正确的路径却无法加载视频（angular动态绑定动态src）

今天的开发任务中有一个需求是将视频显示在列表中，视频地址存在数据库的一个字段中，每个用户可以存多个视频，每个视频的地址用，隔开。看上去是一个很容易实现的功能，后台取出该字段然后通过分割，获取到每个地址然后传回前端。前端使用的是基于Angular的框架，所以通过ng-repeat进行循环展示即可。可就是这个看似简单的问题却有一个不大不小的坑。

<div class="form-group" ng-show="review.videoUrl!=''" ng-repeat="url in urls">
    <label class="col-sm-1 control-label">视频认证:</label>
    <div class="col-sm-10">
        <td >
            <video id="vedio" ng-src="url"  ng-show="url!=null"
              controls="controls" style="width:600px;height:   300px;">
           		   您的浏览器不支持 video 标签。
		    </video>
        </td>
	</div>
</div>

上图是正常操作，理想效果是循环展示出所有的视频，然而现实是要么报错，要么无法获取路径…

那么问题出在哪里呢，通过翻阅资料得知：在angularJs中为了避免安全漏洞，一些ng-src或者ng-include都会进行安全校验，因此常常会遇到ng-src正确地址却无法使用。简单来说就是我们用angular里面的 ng-src 时会进行安全检查  因为我们是访问资源服务器上面的视频  所以他不给你这个url通过 所以我们就不放不了视频。原因知道了，那接下来就该思考如何解决了，而方法就是使用$sce服务把一些地址变成安全的、授权的链接...简单地说，就像告诉门卫，这个陌生人其实是我的好朋友，很值得信赖，不必拦截它！下面直接上代码：

<div class="form-group" ng-show="review.videoUrl!=''" ng-repeat="url in urls">
    <label class="col-sm-1 control-label">视频认证:</label>
    <div class="col-sm-10">
        <td >
            <video id="vedio" ng-src="{{url | trustUrl }}"  ng-show="url!=null"
              controls="controls" style="width:600px;height: 300px;">
              您的浏览器不支持 video 标签。
            </video>
        </td>
    </div>
</div>

这上面是html标签 ，然后是过滤器的代码：

app.filter("trustUrl", ['$sce', function ($sce) {
    return function (recordingUrl) {
    return $sce.trustAsResourceUrl(recordingUrl);
    };
}]);

这样angularJS 在使用html5 的 video src就可以了 。

在解决过程中还存在一个小疑问，上代码：

//获取视频地址
$http({
        method: "get",
        url:$constens.API.URL_BUSBASE_APPROVAL_DETAIL_URL + '?id=' + $stateParams.id_self,
     }).success(function (data, status, headers, config) {
             var urls=data;
             console.log(urls);
             $scope.urls = urls;
         });

后台分割了地址后存入数组回调存到了data中，此时如果直接将data存入 $scope.urls中浏览器会显示data的数据为空对象，只有在var了一个对象并将data值存入其中，然后将对象值赋给$scope.urls才可使用，由于本人对前端知识没有太多了解所以想求助大佬为何会出现这种情况，有知道的望告知，感谢。