AngularJS—关于 video 路径赋值的问题_小程序修改video的路径赋值-CSDN博客

首先，先介绍一下 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>

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