JSFiddle - React, Tailwind, and code Playground

by Sai Baba Satchitanand

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'
       }
   ];

});