Чтение внешнего url из json-файла с использованием угловых js

Question

Как я могу получить/отобразить внешний медиа-контент из URL-адреса, хранящегося в json-файле, с помощью угловых js?

JSON

"media": [ 
     { 
      "title": "Example_1", 
      "url": "http://www.w3schools.com/html/mov_bbb.mp4" 
     }, 
     ……. 
] 

Контроллер

controller('Controller', ['$scope','$http', function($scope, $http) { 
    $http.get('myjson.json').success(function (data){ 

     $scope.medianew = data.media; 

    }); 

HTML

<div class="panel-body" ng-repeat = "md in medianew">       
     <video ng-src="{{md.url}}" width="240" controls></video> 
</div> 

Я не в состоянии отображать медиа из внешних источников. Что я здесь делаю неправильно?

Answer 1

Ваша проблема в некоторой степени похож на этот one.

Вы должны использовать $sce службу из угловой. Я сделал plnkr, чтобы решить вашу проблему.

.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) { 

    $http.get('myjson.json').success(function (data){ 
    $scope.medianew = data.media.map(function (m) { 
     m.url = $sce.trustAsResourceUrl(m.url); 
     return m; 
    }); 

    }]); 

Answer 2

В принципе, вам необходимо проанализировать содержимое файла json как json.

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope, $http) { 
    // parse the string content as json 
    $scope.mediaNew = JSON.parse('[{"title":"Example_1","url":"http://www.w3schools.com/html/mov_bbb.mp4"}]'); 
    $scope.trustSrc = function(src) { 
     // trust an insecure url 
     return $sce.trustAsResourceUrl(src); 
    }; 
} 

<div ng-controller="MyCtrl"> 
    <div class="panel-body" ng-repeat = "md in mediaNew">  
    <h1> 
     {{md.title}} 
    </h1> 
    <video ng-src="{{ trustSrc(md.url) }}" width="240" controls></video> 
    </div> 
</div> 

Работа демо - https://jsfiddle.net/aghosh08/c2d8pwr7/