AngularJS H5 video src url

首先说下背景 我这边开发web  使用后H5页面 用的是angularJs  

问题: 在开发的时候 把路径放在H5页面里面的video标签 路径是对的  视频也是可以播放的 但是就是播放不了令人费解

如果我直接使用 

 <video src="{{item.url}}"  width="320" height="240" controls="controls">

                                                    </video>

这样会在前台报出angularJs错误  

Error: $interpolate:interr

Interpolation Error

说是插值误差

然后我查到 在angularJs 中有一个 ng-src  我就把上列代码中的src 变成 ng-src 

但是还是不行 他还是会在前台爆出 插值错误

最后我在网上找到了答案  

为什么我们直接给ng-src 或者 src 路径是时不行的呢?

原来:

在angularJs中为了避免安全漏洞，一些ng-src或者ng-include都会进行安全校验，因此常常会遇到一个iframe中的ng-src无法使用。

人话就是  我们用angular里面的 ng-src 时会进行安全检查  因为我们是访问资源服务器上面的视频  所以他不给你这个url通过 所以我们就不放不了视频

这里有人要说了  为什么我用 src="{{item.url}}" 也不行 我想说的是 因为我们使用了{{item.url}} 这个在页面加载的时候 angularjs 会把src变成ng-src  这样所以不能通过

那么我们怎么解决这个url问题  

简单直接 我们直接告诉angularJs 这个url是安全的  你信任他 

方法是 $sce服务把一些地址变成安全的、授权的链接...简单地说，就像告诉门卫，这个陌生人其实是我的好朋友，很值得信赖，不必拦截它！

常用的方法有：

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

下面我是我处理过的代码 已经可以执行了

                                                <div class="col-sm-10">
                                                    <video ng-src="{{videoUrl(item.url)}}"  width="320" height="240" controls="controls">

                                                    </video>
                                                </div>

下面是JS videoUrl方法

 /**
     * 视频路径处理
     */
    $scope.videoUrl = function(url){
        return $sce .trustAsResourceUrl(url);
    }

这样我的视频就可以直接播放了

感谢网络上的大牛和前辈的分享,希望这边文章可以帮助到你 谢谢