current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I got an error of Error while interpolating: videos/{{video.name}} with below code :

<div ng-repeat='video in videos'>
        <div class="col-md-3">
        <video controls>
          <source src="videos/{{video.name}}" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
        {{video.name}} // this worked
        </div>
    </div>

Tried ng-src too but doesn't work. Strange.

share|improve this question
up vote 0 down vote

Use this filter,

app.filter("trustUrl", ['$sce', function ($sce) {
        return function (recordingUrl) {
            return $sce.trustAsResourceUrl(recordingUrl);
        };
    }]);

HTML

    <video controls>
      <source src="videos/{{video.name | trustUrl}}" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
share|improve this answer
    
video.name is just name like 'tarzen 2016 - something something' – Jenny Mok 2 days ago
    
ok then form the url using javascript and apply the trustUrl for entire url – Sajeetharan 2 days ago
    
upvote if it has helped – Sajeetharan yesterday
    
[$interpolate:noconcat] Error while interpolating: videos/{{video.name}} – Thian Kian Phin yesterday
    
why did you remove the answer? – Sajeetharan 23 hours ago
up vote 0 down vote

Try this :

Html :

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat='video in videos'>
        <div class="col-md-3">
        <video controls>
          <source src="videos/{{video.name}}" type="video/mp4">
          Your browser does not support HTML5 video.
        </video>
        {{video.name}} // this worked
        </div>
    </div>
</div>

JS :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.videos = [
      {"name":"alpha"},
      {"name":"beta"},
      {"name":"gama"}
    ]
});

Working demo!

share|improve this answer
    
your 'working demo' is so big, but can the video be played? – Jenny Mok yesterday
    
Big means ? .. I dont know the exact streaming url but it will work. Its just a answer of your question and demo how to parse the controller data in view. – Rohit Jindal yesterday
    
Actually this question is not easy, it's a bug in angularjs github.com/angular/angular.js/issues/1352 – Jenny Mok yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.