AngularJS H5 video src url

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

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

    如果我直接使用

    1
    2
    3
    4
    5
    <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=”“ 也不行 我想说的是 因为我们使用了 这个在页面加载的时候 angularjs 会把src变成ng-src 这样所以不能通过

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

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

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

常用的方法有:

1
2
3
4
5
$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

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

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

  • 下面是JS videoUrl方法

    1
    2
    3
    4
    下面是JS videoUrl方法
     $scope.videoUrl = function(url){
        return $sce .trustAsResourceUrl(url);
     }