AngularJS—关于 video 路径赋值的问题

首先，先介绍一下 angular.js 的一个小功能 ng-src ，这个是比较常见的方法，用于给图片动态添加路径。例如：

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" />

或者

<img ng-src="{{hash}}" />

现在进入正题：

当你把上面的方法用在视频标签上的时候，那就会产生一个坑，一个不深不浅的坑。要么报错，要么无法获取路径…

那应该怎么办呢？ 这个时候发现angular 其实是提供了一种方法的 $sce

使用方法：

var app = angular.module('app');app.controller('AppController', function($scope, $sce){    //定义一个方法    $scope.videoUrlFun = function(url){        //$sce.trustAsResourceUrl方法把普通路径处理加工成一个angular环境可识别，并认为是安全的路径来使用        var urlFun = $sce.trustAsResourceUrl(url);        return urlFun;    };});

在html上这样使用：

<video ng-src="{{videoUrlFun(upload.video)}}" controls width="320" height="240"></video>

ok，大功告成了！用法比较灵活，这只是满足我需求的一种用法！

使用方法二：

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

在html上这样使用：

<audio src="{{URL | trustUrl}}" audioplayer controls></audio>

这个方法用起来也是比较好的，自行选择。