JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<section ng-app="app">
<div ng-controller="MainCtrl">
<p>I have a fake API response with a few videos. Is the only way to display them to loop over my API response and call my $scope.trusted function?</p>
<div ng-repeat="video in apiVideosResponse">
<video controls autoplay>
<source ng-src="{{ video.mp4 }}" type="video/mp4">
<source ng-src="{{ video.webm }}" type="video/webm">
<source ng-src="{{ video.ogv }}" type="video/ogg">
</video>
</div>
<hr>
</div>
</section>
CSS
video { max-width: 250px; border: 1px solid; }
JavaScript
var app = angular.module("app", []);
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
'self',
// Allow loading from our assets domain. Notice the difference between * and **.
'http://media.w3.org/**']);
});
app.controller("MainCtrl", function($scope, $sce) {
$scope.trusted = function(url) {
return $sce.trustAsResourceUrl(url);
}
$scope.apiVideosResponse = [
{ webm:'http://media.w3.org/2010/05/sintel/trailer.webm',
mp4: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
ogv: 'http://media.w3.org/2010/05/sintel/trailer.ogv'
},
{ webm:'http://media.w3.org/2010/05/sintel/trailer.webm',
mp4: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
ogv: 'http://media.w3.org/2010/05/sintel/trailer.ogv'
},
{ webm:'http://media.w3.org/2010/05/sintel/trailer.webm',
mp4: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
ogv: 'http://media.w3.org/2010/05/sintel/trailer.ogv'
},
{ webm:'http://media.w3.org/2010/05/sintel/trailer.webm',
mp4: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
ogv: 'http://media.w3.org/2010/05/sintel/trailer.ogv'
}
];
});