javascript - Angular在渲染视频和音频的url地址时报错

问题描述

问 题

项目是一种答题小游戏，题目里面有文字、图片、视频和音频4种格式，我用的angular框架，但是在渲染视频和音频时老是报错，用了$sce还是不能解决，求助大神。
下面是html部分的代码

<div class="other">
    <img  ng-src="{{store.sub[index].attachment}}" class="image"/>
    <video width='100%' height="auto" class="video" controls="controls">
        <source ng-src="{{store.sub[index].attachment}}">
    </video>
    <audio class="audio" controls="controls">
        <source ng-src="{{store.sub[index].attachment}}">
    </audio>
</div>

js里面

.controller("timer",function($scope,$state,$sce){
        var str=$scope.store.sub[index].attachment;
        $scope.store.sub[index].attachment=$sce.trustAsResourceUrl(str);
    })
    

解决方案

.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])

<div class="other">
        <img  ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}" class="image"/>
        <video width='100%' height="auto" class="video" controls="controls">
            <source ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}">
        </video>
        <audio class="audio" controls="controls">
            <source ng-src="{{store.sub[index].attachment|trustAsResourceUrl}}">
        </audio>
    </div>

这篇关于javascript - Angular在渲染视频和音频的url地址时报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！